使用firefox

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新：

我刚注意到滚动条显示我是否使用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>