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

Question

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

虽然我发现了一些相关的解决方案（这个和这个) 在 SO 上，它们仅在表格宽度小于屏幕尺寸时才起作用。在我的例子中，屏幕尺寸为 1200px，表格总宽度为 1600px。

我怎么能这样做呢？我想实现类似这样的目标。

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

EDIT2

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

EDIT3

当前表代码。尽管我可以垂直滚动，但它没有垂直滚动条。

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

Answer 1

如果你想让 header 保持固定，你只需做一些 css

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

Answer 2

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

Answer 3

将表格放在宽度 < 的 div 中800，并设置overflow:scroll。

Answer 4

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

Answer 5

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