CSS实现表格统一列宽：不指定宽度如何设置等宽列

存在完全符合要求的纯CSS实现，无需JS、无需预设表格/列宽、无需提前获知最宽列尺寸

核心实现原理 #

利用CSS Grid布局的原生轨道计算能力：将表格设置为行内网格容器后，1fr单位的列轨道会在布局计算阶段自动遍历所有单元格内容，将所有列的宽度统一对齐到内容最宽的单元格尺寸，全程由浏览器渲染引擎完成，无脚本参与。

实现代码 #

原生<table>元素适配方案（现代浏览器） #

.equal-col-table {
  /* 容器宽度自动收缩适配内容，无需手动指定宽度 */
  display: inline-grid;
  /* 自动生成的所有列采用等宽fr单位 */
  grid-auto-columns: 1fr;
  /* 保留表格原有边框合并特性 */
  border-collapse: collapse;
}
.equal-col-table tr {
  display: grid;
  /* 子行继承父容器的列轨道定义，保证跨行列对齐 */
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
.equal-col-table th,
.equal-col-table td {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  /* 不需要内容折行就加下面这行，要折行直接删除即可 */
  white-space: nowrap;
}

使用示例：

<table class="equal-col-table">
  <tr>
    <th>短标题</th>
    <th>这是一段非常长的表格表头内容用来撑列宽</th>
    <th>中等长度标题</th>
  </tr>
  <tr>
    <td>1</td>
    <td>测试数据</td>
    <td>普通内容</td>
  </tr>
  <tr>
    <td>短</td>
    <td>常规数据项</td>
    <td>稍微长一点的内容</td>
  </tr>
</table>

渲染后三列宽度完全一致，均等于最长表头的内容宽度，表格整体宽度自动适配，无需手动设置任何宽度值。

Div模拟表格方案（兼容性更好） #

如果不需要用原生table语义，或者需要兼容稍早版本的浏览器，可以用div结构+display: contents实现，不需要依赖subgrid：

.custom-table {
  display: inline-grid;
  grid-auto-columns: 1fr;
}
.table-row {
  /* 行元素不生成独立布局盒，单元格直接挂载到表格网格下 */
  display: contents;
}
.table-cell {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

方案符合要求验证 #

• 无需指定表格整体宽度：inline-grid特性让容器宽度自动适配内容总宽度
• 无需单独设置列宽、无需提前知道最宽列尺寸：Grid布局原生计算所有单元格内容宽度，自动取最大值作为统一列宽
• 无需JS介入：所有列宽计算在浏览器渲染阶段完成，无脚本逻辑，性能远高于JS遍历测量的方案

兼容性说明 #

• 原生table+subgrid方案兼容Chrome 114+、Firefox 113+、Safari 16.4+的现代浏览器
• Div+display: contents方案兼容Chrome 65+、Firefox 59+、Safari 11.1+，覆盖绝大多数主流用户场景

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