Question

我有一个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>

Answer 1

您可以将表格包装在具有固定大小（800x50）且设置为overflow:scroll的div中。

Answer 2

将您的表放在宽度为＆lt;的div中800，并设置overflow: scroll。

Answer 3

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

Answer 4

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

Answer 5

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

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

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

5 个答案: