如何用flex或grid实现无table的列宽自适应最大单元格布局？

你说的这种列宽自动匹配该列最大单元格内容的布局，本质是基于内容的自适应列宽布局——原生<table>默认就是这个行为，完全可以用Grid或Flexbox复刻，不需要table标签。

一、CSS Grid实现（首选） #

Grid是为二维布局设计的，天生适配这种表格场景，代码简洁且效果和原生table完全一致：

代码示例 #

<div class="grid-table">
  <div class="grid-row">
    <div class="grid-cell">y</div>
    <div class="grid-cell">sin(x)*cos(x)</div>
  </div>
  <div class="grid-row">
    <div class="grid-cell">f(x)</div>
    <div class="grid-cell">tan(x)</div>
  </div>
</div>

.grid-table {
  display: grid;
  /* 核心：每列宽度自动适配该列最宽内容 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  border-collapse: collapse;
  border: 1px solid #000;
}

.grid-row {
  display: contents; /* 让row不占布局空间，直接让cell成为Grid子元素 */
}

.grid-cell {
  font-family: "Courier New", monospace;
  padding: 0.25em;
  border: 1px solid #000;
  white-space: nowrap; /* 避免内容换行，确保宽度计算准确 */
}

二、Flexbox实现 #

Flex是一维布局，要实现列宽统一需要额外处理，适合简单的少量列表格：

代码示例 #

<div class="flex-table">
  <div class="flex-row">
    <div class="flex-cell">y</div>
    <div class="flex-cell">sin(x)*cos(x)</div>
  </div>
  <div class="flex-row">
    <div class="flex-cell">f(x)</div>
    <div class="flex-cell">tan(x)</div>
  </div>
</div>

.flex-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
}

.flex-row {
  display: flex;
}

.flex-cell {
  font-family: "Courier New", monospace;
  padding: 0.25em;
  border: 1px solid #000;
  white-space: nowrap;
  /* 核心：让同位置列的宽度由最大内容决定 */
  flex: 1 0 min-content;
}

方案对比 #

• Grid：逻辑更贴合表格的二维结构，无需额外处理就能实现列宽统一适配内容，维护成本低，优先推荐。
• Flex：依赖flex属性同步列宽，列数多的时候容易出问题，适合简单场景。

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