使用 Firefox 时溢出滚动在表格中不起作用

Question

如果单元格的值太长，我会尝试在表格中显示滚动条，我尝试使用overflow，但您可以看到它不起作用，没有滚动条，单词显示在它的全长

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    overflow: scroll;
    color: red;
    max-width: 50px;
}

<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">Very long filename for demonstration</td>
  <td>Test</td>
</tr>
</table>

更新：

我刚刚注意到，如果我使用 Chrome 浏览器，滚动条会显示，但如果我使用 Firefox，则不会显示。所以很遗憾overflow 似乎与firefox 不兼容。

Answer 1

如果你声明

.test {
display:inline-block;
white-space: nowrap;
overflow-x: scroll;
}

那么overflow:scroll 也可以在 Firefox 中使用：

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
  color: red;
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow-x: scroll;
}

<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">Very long filename for demonstration</td>
  <td>Test</td>
</tr>
</table>

---

版本 2：

主要变化：

• td 有 display: block; 而不是 display: inline-block;
• td 有 overflow:auto; 而不是 overflow:scroll;

table, td {
  border: 1px solid black;
}

td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
}

<table>
<tr><td>account_requests</td></tr>
<tr><td>backend.template</td></tr>
<tr><td>firmware.host</td></tr>
<tr><td>frontend.template</td></tr>
<tr><td>license.host</td></tr>
<tr><td>licensing.host</td></tr>
<tr><td>mail.auto_smtp_authentification_password</td></tr>
</table>