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

Question

我需要你的帮助。我有一个HTML表，它有很多列。我已经用css制作了适合桌子和笔记本电脑屏幕的水平滚动条，它在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