如何用Flexbox结合Span与表格列实现最后一列对齐且宽度统一？

这需求我之前做项目时也碰到过，核心是要让前两列的宽度由所有行中对应列的最大内容决定，第三列统一占据容器剩余空间。下面给你两种可行的实现方案，都能完美满足你的要求：

方案一：CSS Grid（推荐，灵活度高） #

用Grid布局可以轻松实现列宽的统一控制，代码简洁且兼容性好：

HTML 结构 #

<div class="grid-table">
  <div class="row">
    <div class="col1">短文本</div>
    <div class="col2">中等长度内容</div>
    <div class="col3">这列会填充剩余空间，所有行宽度一致</div>
  </div>
  <div class="row">
    <div class="col1">这是第一列最长的内容，会撑大整个网格的第一列宽度</div>
    <div class="col2">第二列的超长测试内容，决定第二列的最终宽度</div>
    <div class="col3">和其他行第三列宽度完全相同</div>
  </div>
  <div class="row">
    <div class="col1">短</div>
    <div class="col2">短</div>
    <div class="col3">统一宽度的第三列</div>
  </div>
</div>

CSS 样式 #

.grid-table {
  display: grid;
  /* 前两列取各自列的最大内容宽度，第三列占剩余所有空间 */
  grid-template-columns: max-content max-content 1fr;
  gap: 8px; /* 可选：列之间的间距，按需调整 */
  width: 100%; /* 让容器占满父元素宽度 */
  margin: 16px 0;
}

.row {
  display: contents; /* 让行元素不参与布局，子元素直接对齐到网格列 */
}

/* 可选：给单元格加样式，方便查看效果 */
.col1, .col2, .col3 {
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.col3 {
  background-color: #f8f9fa;
}

原理说明 #

• grid-template-columns: max-content max-content 1fr 是核心：
  • max-content 会让对应列的宽度等于该列所有单元格中内容最宽的那个的宽度，确保所有行的前两列宽度统一
  • 1fr 表示第三列占据容器剩余的全部空间，因为前两列宽度固定（基于最大内容），所以所有行的第三列宽度自然完全一致
• display: contents 让.row元素本身不占用网格空间，它的子元素直接作为网格容器的子项，保证每一行的三列都严格对齐到网格的三列上

方案二：原生Table标签（适合传统表格场景） #

如果你需要用原生<table>实现，也可以通过<colgroup>配合max-content来实现：

HTML 结构 #

<table class="fixed-col-table">
  <colgroup>
    <col style="width: max-content;">
    <col style="width: max-content;">
    <col style="width: 100%;">
  </colgroup>
  <tbody>
    <tr>
      <td>短文本</td>
      <td>中等长度内容</td>
      <td>填充剩余空间的内容</td>
    </tr>
    <tr>
      <td>第一列最长的内容，决定第一列宽度</td>
      <td>第二列超长测试内容</td>
      <td>统一宽度的第三列</td>
    </tr>
    <tr>
      <td>短</td>
      <td>短</td>
      <td>和其他行第三列宽度一致</td>
    </tr>
  </tbody>
</table>

CSS 样式 #

.fixed-col-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.fixed-col-table td {
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
}

.fixed-col-table td:last-child {
  background-color: #f8f9fa;
}

原理说明 #

• <colgroup> 中的<col>标签设置width: max-content，让前两列的宽度由对应列的最大内容决定
• 第三列设置width: 100%，会自动占据表格剩余的所有空间，表格设置width: 100%确保它占满父容器，从而让所有行的第三列宽度统一

这两种方案都能完美解决你的问题，你可以根据自己的场景选择～

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