在Webkit浏览器中使TBODY可滚动

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

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

    

        
This is the header and doesn't scroll
    
    

        
content that scrolls
        
content that scrolls
        
content that scrolls
        
content that scrolls
        
content that scrolls
        
content that scrolls
        
content that scrolls
    

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

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

1> Michael Kope..：

---

这是一个工作示例:

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

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

---

这不是解决方案.表的整个_point_是具有动态对齐w /表中显示的数据点的列.在标题上设置固定宽度最终只会导致错误对齐的表.在浏览器中正确显示表格数据的斗争正在......*叹气*

---

这仅适用于每个单元格相同的设置长度.是否可以使用灵活的表格进行此操作？

---

如果这个例子适用于IE9会很好:(

---

这完全失败了IE 9,解决方案不像imho那样难以察觉.没有后备,在IE上它根本没有表格线!

2> 小智..：

---

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

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

---

"对我来说问题是我无法修复列宽." 确切地说是我的问题.= /

---

对我来说,也无法修复列宽

3> 小智..：

---

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

4> Sean Haddy..：

---

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

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

5> Jeromy Frenc..：

---

我看到了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/