如何创建一个表，它比屏幕尺寸宽，可滚动和保持标题行固定？ [英] How to make a table, which is wider than screen size, scrollable and keep header row fixed?

问题描述

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

I've a table with 2 columns and each column is 800px wide. I want to show this table in 800x50 window. So there should be horizontal and vertical scrollbar to view complete table.

虽然我发现了很少的相关解决方案（ this 和这），他们只有工作，如果表宽度小于屏幕尺寸。在我的情况下，屏幕大小为1200像素，总表宽度为1600像素。

While I've found few related solutions (this and this) on SO, they only work if table width is smaller than screen size. In my case screen size is 1200px and total table width is 1600px.

我该如何做？我想实现类似这个。

How could I do this? i want to achieve something like this.

EDIT
糟糕，我忘记添加一个要求。抱歉。我希望在用户滚动表格时，表格的标题保持不变。

EDIT Oops, I forgot to add one more requirement. Sorry. I want the header of the table to remain fixed while user scrolls table.

EDIT2

我试过下面提到的解决方案来换行，但在这种情况下，垂直滚动条不会出现。请使用wrapper div查看此表。看来这个问题只有在表格宽度大于屏幕尺寸时才会出现。我在测试FF3.6。

I've tried below mentioned solutions to wrap in a div, but in this case vertical scrollbar doesn't show up. Please see this table with wrapper div. It seems this problem only occurs if table width is bigger than screen size. I'm testing on 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>

推荐答案

固定大小（800x50）并设置 overflow：scroll 。

You could wrap the table in a div that has a fixed-size (800x50) and set overflow:scroll.

这篇关于如何创建一个表，它比屏幕尺寸宽，可滚动和保持标题行固定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！