如何用React实现表头与表体一体化的表格布局？

我希望用React实现表头行与表体行视觉一体化的表格布局，目标效果（红色区域为Grid布局）：

但当前布局效果如下：

以下是我的代码：

<Table className="table d-flex row pokemon-detail-table">
    <thead>
        <tr className="d-flex justify-content-between th-border ">
            <th scope="col">Waktu</th>
            <th scope="col">Kegiatan</th>
            <th scope="col">Catatan</th>
            <th scope="col">Jumlah</th>
            <th scope="col">Stok</th>
        </tr>
    </thead>
    <tbody>
        <tr className="d-flex justify-content-between d-flex align-items-center">
            <td className="">2 Apr 2021, 08:00</td>
            <td className="table-link">Update Stok</td>
            <td className="">"Stok Awal"</td>
            <td className="table-count-stock">+10</td>
            <td className="table-bold">10</td>
        </tr>
    </tbody>
</Table>

调整方案 #

当前问题出在滥用Bootstrap的flex类（d-flex、justify-content-between），打乱了表格原生的列对齐机制，导致表头与表体列宽不匹配。通过Grid布局可以精准统一列宽，实现视觉一体化：

1. 清理组件代码中的冗余flex类

<Table className="pokemon-detail-table">
    <thead>
        <tr className="th-border">
            <th scope="col">Waktu</th>
            <th scope="col">Kegiatan</th>
            <th scope="col">Catatan</th>
            <th scope="col">Jumlah</th>
            <th scope="col">Stok</th>
        </tr>
    </thead>
    <tbody>
        <tr className="align-items-center">
            <td>2 Apr 2021, 08:00</td>
            <td className="table-link">Update Stok</td>
            <td>"Stok Awal"</td>
            <td className="table-count-stock">+10</td>
            <td className="table-bold">10</td>
        </tr>
    </tbody>
</Table>

2. 添加Grid布局CSS样式

.pokemon-detail-table {
  display: grid;
  grid-template-columns: 1fr 1.5fr 2fr 1fr 1fr; /* 按内容需求调整列宽比例 */
  width: 100%;
}

.pokemon-detail-table thead,
.pokemon-detail-table tbody,
.pokemon-detail-table tr {
  display: contents; /* 让th/td直接参与Grid布局，忽略tr等容器层级 */
}

.pokemon-detail-table th,
.pokemon-detail-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6; /* 保持行分隔线，可按需修改 */
}

.pokemon-detail-table th {
  background-color: #f8f9fa; /* 表头背景色，可按需修改 */
  font-weight: bold;
}

效果说明 #

• display: contents 让表头和表体的单元格直接成为Grid容器的子元素，所有列严格遵循grid-template-columns的宽度配置，实现完全对齐。
• 自定义列宽比例可以根据实际内容灵活调整，确保视觉上的一体化效果。

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