实现可滚动tbody且不扭曲列布局的解决方案

问题根源在于：当给tbody设置display: block后，它脱离了原生表格的布局流，不再和thead共享列宽计算逻辑，导致列对齐失效。

下面是两种可行的修复方案：

方案一：统一列宽（推荐） #

利用table-layout: fixed的特性，给所有<th>和<td>设置相同的宽度，确保表头和内容列严格对齐：

table {
  width: 100%;
  table-layout: fixed; /* 固定表格布局，列宽由th/td的width决定 */
}

th {
  background-color: green;
  width: 20%; /* 5列，每列占20%宽度 */
}

td {
  background-color: red;
  width: 20%;
}

tbody {
  display: block;
  height: 300px;
  overflow-y: auto;
  width: 100%;
}

tr, td {
  height: 60px;
}

方案二：将thead也转为block布局 #

如果需要更灵活的列宽，可以把thead也设置为display: block，同时确保它的宽度和tbody一致，还能额外设置表头固定：

table {
  width: 100%;
  table-layout: fixed;
}

th {
  background-color: green;
}

td {
  background-color: red;
}

thead, tbody {
  display: block;
  width: 100%;
}

tbody {
  height: 300px;
  overflow-y: auto;
}

tr, td {
  height: 60px;
}

/* 可选：固定表头，滚动tbody时表头保持不动 */
thead {
  position: sticky;
  top: 0;
}

修改后的HTML保持不变：

<table>
<thead>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>Row1Col5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
</tbody>
</table>

内容的提问来源于stack exchange，提问作者Korpin