如何让表格列实现flexbox的justify-content: space-between效果？

要实现首列靠左、末列靠右，其余列自适应填充中间的效果，有两种实用方案：

方案一：CSS Grid模拟表格（推荐，灵活性更高） #

通过Grid布局可以直接实现类似flex的space-between分布逻辑，同时保留类表格的结构：

.table-grid {
  display: grid;
  /* 首列/末列自适应内容宽度，中间列填充剩余空间；多中间列时用repeat(auto-fit, minmax(100px, 1fr)) */
  grid-template-columns: auto repeat(auto-fit, minmax(100px, 1fr)) auto;
  gap: 1rem; /* 列间距可选 */
  width: 100%;
}

.table-grid .row {
  display: contents;
}

.table-grid .cell {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.table-grid .cell:first-child {
  text-align: left;
}

.table-grid .cell:last-child {
  text-align: right;
}

对应的HTML结构：

<div class="table-grid">
  <div class="row">
    <div class="cell">首列内容</div>
    <div class="cell">中间列1</div>
    <div class="cell">中间列2</div>
    <div class="cell">末列内容</div>
  </div>
  <div class="row">
    <div class="cell">左对齐文本</div>
    <div class="cell">自适应列</div>
    <div class="cell">另一自适应列</div>
    <div class="cell">右对齐文本</div>
  </div>
</div>

方案二：原生表格结合CSS技巧（适合必须用<table>标签的场景） #

通过控制列宽和对齐方式，让原生表格实现目标效果：

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

/* 首列左对齐，宽度自适应内容 */
.custom-table th:first-child,
.custom-table td:first-child {
  text-align: left;
  width: 1%;
  white-space: nowrap;
}

/* 末列右对齐，宽度自适应内容 */
.custom-table th:last-child,
.custom-table td:last-child {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* 中间列平分剩余空间，内容居中 */
.custom-table th:not(:first-child):not(:last-child),
.custom-table td:not(:first-child):not(:last-child) {
  text-align: center;
}

对应的HTML结构：

<table class="custom-table">
  <thead>
    <tr>
      <th>首列</th>
      <th>中间列1</th>
      <th>中间列2</th>
      <th>末列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>左对齐文本</td>
      <td>自适应列</td>
      <td>另一自适应列</td>
      <td>右对齐文本</td>
    </tr>
  </tbody>
</table>

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