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

如何在Chrome浏览器中支持html表滚动条？

1 个答案: