一尘不染

使TBODY在Webkit浏览器中可滚动

css

我知道这个问题,但所有答案都无法在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对其进行修复?


阅读 245

收藏
2020-05-16

共2个答案

一尘不染

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

2020-05-16
一尘不染

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

我意识到,仅当您未为th&td元素指定宽度时,才会出现我提到的问题-如果您可以固定列宽,则它可以工作。我的问题是我无法固定列宽。

2020-05-23