在Webkit浏览器中使TBODY可滚动

Question

我知道这个问题,但没有一个答案适用于Safari,Chrome等.

接受的策略(如此处所示)是设置tbody高度和溢出属性,如下所示:

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

不幸的是,这在任何webkit浏览器中都不起作用.有一个关于它的错误报告似乎不是一个高优先级(据报道,05年6月).

所以我的问题是:是否有其他策略确实有效？我尝试过双表方法,但是不可能保证标题与内容对齐.我只需要等待Webkit修复它吗？

Answer 1

这是一个工作示例:

http://www.imaputz.com/cssStuff/bigFourVersion.html

你必须将display:block添加到thead> tr和tbody

Answer 2

使用display:block样式仅在有1列时才有效.如果你有多个数据列 - 有多个字段 - 那么display:block似乎可以使所有数据列都可滚动但在第一列下(在Firefox中也是如此 - 这是我知道的唯一一个可以很好地滚动的浏览器).顺便说一句,在Firefox上 - 您可以使用overflow-x:hidden样式来抑制水平滚动.

我意识到,如果你没有为th&td元素指定宽度,我提到的问题只会出现 - 如果你可以修复列宽,那么它可以工作.对我来说问题是我无法修复列宽.

Answer 3

尝试这个页面的第一个方法,带有单个表的纯CSS(表格周围有2个div,而thead绝对定位):http://www.cssplay.co.uk/menu/tablescroll.html 似乎可以工作FF4/IE9/IE8除IE7/FF3.6外.

Answer 4

我有同样的问题并编写了一个jQuery脚本来为我做这个...使用两个表元素并相应地格式化css.希望这有助于其他有同样问题的人......

http://jsfiddle.net/pe295/1/

Answer 5

我看到了Sean Haddy的出色解决方案,并冒昧地做了一些编辑:

• 使用类而不是ID,因此可以在一个页面上为一个多个表重用一个jQuery脚本
• 添加了对caption,thead,tfoot和tbody等语义HTML表元素的支持
• 使滚动条可选,因此对于比可滚动高度"更短"的表格不会出现
• 调整滚动div的宽度,使滚动条向上移动到表的右边缘
• 制作概念可通过
  • 在注入的静态表头上使用aria-hidden ="true"
  • 并将原始的thead留在原地,只是隐藏了jQuery并设置 aria-hidden="false"
• 显示了具有不同大小的多个表的示例

然而,肖恩做了沉重的事.感谢Matt Burland,也指出需要支持tfoot.

请参阅http://jsfiddle.net/jhfrench/eNP2N/