如何制作比屏幕尺寸宽的表格，可滚动并保持标题行固定？答案

【问题标题】：How to make a table, which is wider than screen size, scrollable and keep header row fixed?如何制作比屏幕尺寸宽的表格，可滚动并保持标题行固定？
【发布时间】：2011-02-07 14:23:02
【问题描述】：

我有一个table，有 2 列，每列宽 800 像素。我想在 800x50 窗口中显示此表。所以应该有水平和垂直滚动条来查看完整的表格。

虽然我在 SO 上找到的相关解决方案很少（this 和 this），但它们仅在表格宽度小于屏幕尺寸时才有效。在我的例子中，屏幕尺寸是 1200 像素，表格总宽度是 1600 像素。

我怎么能这样做？我想实现类似this。

编辑糟糕，我忘了再添加一个要求。对不起。我希望在用户滚动表格时表格的标题保持固定。

EDIT2

我已经尝试过下面提到的将 div 包裹起来的解决方案，但在这种情况下，垂直滚动条不会出现。请参阅带有包装 div 的 this table。似乎只有在表格宽度大于屏幕尺寸时才会出现此问题。我正在测试FF3.6。

EDIT3

当前table 代码。即使我可以垂直滚动，它也没有垂直滚动条。

<div style="overflow:scroll; width:800px;height:50px" >
<table style="width:1600px" border="1">
  <thead>
    <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_1</th>
    </tr>
  </thead>
  <tbody style="">
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
  </tbody>
</table>
</div>

【问题讨论】：

很抱歉，800x50 是一个无法使用的尺寸。仅滚动条就占用了大约 20 像素，这让您可以使用大约 30 像素……所以您要求您的用户一次滚动显示一或两行？确定你说的不是 800x500？
那些是假数字，我只是想让这个表格工作，然后相应地改变尺寸。

标签： html css width html-table

【解决方案1】：

如果您希望标题保持固定，您只需执行一些 css

#header {
  position:fixed;
  left:0;
  top:0;
}

【讨论】：

这个答案不起作用 - 它不会保留每列的列宽

【解决方案2】：

只需将overflow:scroll 添加到表格元素的css 中。顺便提一句。您的示例没有显示任何滚动。

【讨论】：

@Paul de Vrieze：修复了这个例子。现在它显示滚动，但只显示水平。

【解决方案3】：

我不知道它是否会起作用，但您是否尝试过为页面设置max-width: 100%？

【讨论】：

【解决方案4】：

您可以将表格包装在具有固定大小 (800x50) 的 div 中并设置 overflow:scroll。

【讨论】：

@Vivin Paliath：当表格长度大于屏幕尺寸时，我看不到垂直滚动。请看这个：jsbin.com/uwubu3/3
我打开它时看到滚动条很好。你的意思是窗口大小？如果表格大于窗口大小，则需要滚动整个页面才能看到滚动条。没有办法解决这个问题，然后将表格调整为窗口大小。
我也看不到滚动条，但我相信那是因为你的身高太小了。尝试将高度设置为 100 像素，它会正常工作。

【解决方案5】：

将表格放在宽度overflow: scroll。

【讨论】：