如何制作一个比屏幕尺寸宽,可滚动并保持标题行固定的表格?

und*_*ack 8 html css html-table width

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

虽然我在SO上找到了很少的相关解决方案(这个这个),但它们只有在表格宽度小于屏幕尺寸时才有效.在我的情况下,屏幕大小为1200像素,总表格宽度为1600像素.

我怎么能这样做?我希望实现这样的目标.

编辑 哎呀,我忘了添加一个要求.抱歉.我希望用户滚动表时表的标题保持固定.

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>
Run Code Online (Sandbox Code Playgroud)

Viv*_*ath 5

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