我知道这个问题,但所有答案都无法在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浏览器。关于它的错误报告似乎没有被高度重视(6月5日报道)。
所以我的问题是:是否有其他有效的替代策略?我尝试了两表方法,但是无法保证标题与内容对齐。我是否只需要等待Webkit对其进行修复?
您必须将display:block添加到thead> tr和tbody
仅当您有1列时,才使用display:block样式。如果您有多个数据列-具有多个字段-那么display:block似乎使所有数据列都可滚动但在第一列下方(在Firefox中也是如此-这是我所知道的唯一浏览器无法很好地滚动)。顺便提一下,在Firefox上,您可以使用overflow-x:隐藏样式抑制水平滚动。
我意识到,仅当您未为th&td元素指定宽度时,才会出现我提到的问题-如果您可以固定列宽,则它可以工作。我的问题是我无法固定列宽。