react-table-library表格仅tbody滚动时如何避免单列布局问题？

问题根源是给tbody设置display: block后，它脱离了原生table的布局上下文，内部的<tr>不再遵循table的列对齐规则，直接变成块级元素堆叠，导致单列显示。可以通过以下步骤修复：

• 给外层table设置table-layout: fixed和明确宽度（比如100%），让列宽规则能在thead和tbody间共享
• 给thead也设置display: block，保持和tbody的布局一致性，确保表头列和表体列对齐
• 统一设置<th>和<td>的宽度（可以是百分比或固定值，根据列数调整）

示例CSS代码：

/* 包裹表格的容器 */
.table-wrapper {
  width: 100%;
}

.table-wrapper table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.table-wrapper thead {
  display: block;
  width: 100%;
}

.table-wrapper tbody {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  /* 若需要横向滚动可保留overflow-x: auto */
  overflow-x: hidden;
  width: 100%;
}

/* 根据实际列数调整宽度，比如4列各占25% */
.table-wrapper th, .table-wrapper td {
  width: 25%;
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

在react-table-library中，你可以通过给表格组件添加自定义类名（比如table-wrapper）来应用上述样式。如果需要更灵活的列宽控制，也可以给特定的<th>和<td>设置单独的宽度值，确保表头和表体对应列宽度一致。

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