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

我有一个table与2列，每列是800px宽。我想在800x50窗口中显示此表格。所以应该有水平和垂直滚动条来查看完整的表格。如何制作比屏幕尺寸更宽的表格，可滚动并保持标题行的固定？

虽然我在SO上找到了一些相关的解决方案（this和this），但它们只在表格宽度小于屏幕尺寸时才起作用。在我的情况下，屏幕尺寸是1200px，表格总宽度是1600px。

我该怎么做？我想实现类似this。

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

EDIT2

我已经试过下文提到的解决方案，在一个div包裹，但在这种情况下，垂直滚动条显示不出来。请参阅this table与包装div。看起来这个问题只发生在表格宽度大于屏幕尺寸的情况下。我正在测试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>

来源

2010-04-13 understack

我很抱歉，但800x50是不可用的维度。单独的滚动条大约需要20px，这会让你玩大约30px ...所以你要求你的用户每次滚动显示一行或两行？当然你不是指800x500？ – Robusto 2010-04-13 18:42:03

这些都是假的数字，我只是想让这张表工作，然后相应地更改尺寸。 – understack 2010-04-13 18:44:20

您可以将表格换成固定大小（800x50）并设置为overflow:scroll的div。

来源

2010-04-13 18:38:59

@Vivin Paliath：当表格长度大于屏幕尺寸时，我看不到垂直滚动。请参阅：http://jsbin.com/uwubu3/3 – understack 2010-04-13 18:52:18

我打开它时看到滚动条很好。你的意思是窗口大小？如果表格大于窗口大小，则需要滚动整个页面才能看到滚动条。没有办法解决这个问题，然后根据窗口大小调整表格大小。 – 2010-04-13 19:36:56

我也没有看到滚动条，但我相信那是因为你的身高很小。尝试将您的高度设置为100px，并且它会正常工作。 – 2010-04-13 20:01:14

把你的表与宽度< 800一个div，并设置overflow: scroll。

来源

2010-04-13 18:38:44

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

来源

2010-04-13 18:40:13 animuson

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

来源

2010-04-13 18:41:11

@Paul de Vrieze：修正了这个例子。现在它显示滚动，但只有水平。 – understack 2010-04-13 19:12:11

如果你想在头保持固定你只是做一些CSS

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

来源

2010-04-13 18:58:23 Catfish

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

回答

相关问题