html - 如何使 html 表格滚动条在 chrome 浏览器中支持？

Question

我需要你的帮助。我有一个包含许多列的 HTML 表格。我已经使用 css 制作了适合 table 和笔记本电脑屏幕的水平滚动条，它在 firefox 中得到支持，我想知道为什么我的 css 滚动条编码在 chrome 浏览器中不受支持？

这是我的CSS

table.scroll {
table-layout: fixed;
display: block;
overflow-x: scroll;
}

这是我的 html 代码示例(这只是示例，因为我的表中有超过 15 列

<table class="scroll">
<tr>
<td>aaaaaaa</td>
<tr>
</table>

感谢您的帮助...(我需要知道这一点，因为一些会使用我的 html 表格的人正在使用 chrome 浏览器)

Answer 1

首先，您需要确保关闭 <tr></tr>正确标记。

水平滚动条确实适用于 chrome，但您必须设置表格宽度，以便当您的数据溢出 x 轴时您可以滚动一些内容。

让我举例说明:

HTML:

<table class="scroll">
<tr>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
   <td>aaaaaaa</td>
</tr>
</table>

CSS:

  table.scroll {
    table-layout: fixed;
    display: block;
    overflow-x: scroll;
    max-width: 100px;
  }

CODEPEN DEMO