将头部的列与主体对齐

Question

存在一个没有任何<thead>和<tbody>设置的表。它看起来像这样:

我必须使表可滚动，所以在这种情况下，我添加到<tbody>这个样式:

display: block;
height: 475px;
overflow: scroll;

现在，<tbody>的高度为475px，并且可以滚动。这个问题解决了!

但现在<thead>看起来不正确:

为了解决这个问题，我在<thead>中添加了:

display: table;

现在看起来好多了:

但是，列标头仍然不与列对齐。

如何解决这个问题，使表看起来像在添加滚动部分之前?

Answer 1

基本上可以通过将head和tbody设置为block，并为th和td设置固定的宽度来实现。

table {
background: steelblue
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
height: 100px;
}

thead th:nth-child(1), tbody td:nth-child(1) {
background: pink;
width: 90px;
word-break: break-all;
}
thead th:nth-child(2), tbody td:nth-child(2) {
background: olive;
width: 140px;
word-break: break-all;
}
thead th:nth-child(3), tbody td:nth-child(3) {
background: tomato;
width: 80px;
word-break: break-all;
}

<table>
<thead>
<tr>
<th>Make Payment</th>
<th>Order Number</th>
<th>Order Date</th>
</tr>
</thead>

<tbody>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>Inserting a long text here just to show it breaks</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
<tr>
<td>V</td>
<td>9598959</td>
<td>2020-05-12</td>
</tr>
</tbody>
</table