HTML表滚动条问题

Question

在下面的代码中，我尝试使长表可滚动（固定<thead>）。

但是列不再填充表的宽度，thead列甚至不与tbody列对齐。

如何解决这个问题？还有另一种方法可以做到这一点。

代码is here

<table>
    <thead>
        <tr>
            <th>ROW 01</th>
            <th>ROW 02</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>LINE 01</td><td><img src="http://placehold.it/90x90"/></td></tr>
        <tr><td>LINE 02</td><td><img src="http://placehold.it/90x90"/></td></tr>
        <tr><td>LINE 03</td><td><img src="http://placehold.it/90x90"/></td></tr>
    </tbody>
</table>

这里的CSS

table{width: 100%; background: #efefef; border-collapse: collapse }
thead, tbody{display: block}
thead{background: #555; color: white;}
tbody{height: 120px; overflow: auto}
td, th{ border: 1px solid red; }

Answer 1

您可以尝试在<tr> + display:table;中转换table-layout:fixed;这会有所帮助，但列可能会从一行到另一行unless you set a fixed width to one或其他单元格中断。 的 DEMO

你的CSS变成了：

table {
    width: 100%;
    background: #efefef;
    border-collapse: collapse
}
thead, tbody {
    display: block
}
thead {
    background: #555;
    color: white;
    padding-right:1em;/* average width of the scroll bar of tbody */
}
tbody {
    height: 120px;
    overflow: auto
}
tr {/* here make those the table */
    display:table;
    table-layout:fixed;
    width:100%;
}
td, th {/* set a width to go along with table-layout */
    border: 1px solid red;
}

Answer 2

将此添加到您的CSS

td:nth-child(1), th:nth-child(1) { min-width: 200px; } /* or the width you need, you may use percentages */ td:nth-child(2), th:nth-child(2) { min-width: 200px; }

由于浏览器添加了滚动条，因此需要为该元素添加空间，因此，始终会发生错位。好消息是，实际上，您只需要声明第一列，因此如果您打算只使用1列，只需使用以下内容：

td:nth-child(1), th:nth-child(1) { width:20%; min-width: 200px; }

就足够了。

我没有办法在没有声明第一列的最小宽度的情况下做到这一点

Answer 3

试

thead, tbody{display:auto}