如何用SCSS实现：前N列等宽适配内容，最后一列占满剩余宽度？

当然可以！纯SCSS（CSS）就能实现，不用JS #

我之前做过类似的表格布局需求，刚好可以给你分享一个靠谱的实现方案：

核心思路 #

利用HTML表格自带的table-layout: auto特性（浏览器会自动根据内容计算列宽），配合两个关键技巧：

• 给前4列设置一个极小的统一宽度值（比如width: 1），同时禁用内容换行（white-space: nowrap）——浏览器会自动把这4列的宽度统一调整为其中内容最宽的那列的最小所需宽度。
• 让第5列自动填充表格剩余的可用空间。

SCSS代码实现 #

用SCSS的变量和嵌套可以让代码更灵活，后续要调整列数的话改个变量就行：

// 可配置：前N列等宽，这里设为4
$equal-column-count: 4;
$last-column-index: $equal-column-count + 1;

.custom-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; // 关键：让浏览器根据内容自动计算列宽

  colgroup {
    col {
      // 前N列统一设置
      &:nth-child(-n+#{$equal-column-count}) {
        width: 1; // 极小宽度触发等宽逻辑
        white-space: nowrap; // 内容不换行，保证宽度是内容最小需求
      }

      // 最后一列填充剩余空间
      &:nth-child(#{$last-column-index}) {
        width: auto;
      }
    }
  }

  td, th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  // 可选：让最后一列内容过长时自动换行
  td:nth-child(#{$last-column-index}) {
    white-space: normal;
    word-wrap: break-word;
  }
}

对应的HTML结构 #

<table class="custom-table">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>列5（填充剩余空间）</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>短内容</td>
      <td>中等长度文本</td>
      <td>这是一段比较长的内容用来测试列宽</td>
      <td>短</td>
      <td>这里是会填充剩余空间的内容，哪怕文本很长也会自动换行并占满表格的剩余宽度，完全不会挤压前4列的宽度哦</td>
    </tr>
  </tbody>
</table>

原理说明 #

1. table-layout: auto是浏览器默认的表格布局，它会根据单元格内容动态计算列宽。当多个列设置了相同的宽度值（哪怕是1这种极小值），浏览器会自动将这些列的宽度统一为它们中内容最宽的那列的最小宽度，刚好满足你要的“等宽且适配内容最小宽度”的需求。
2. white-space: nowrap确保前4列的内容不会换行，这样计算出的宽度就是内容真正需要的最小宽度，不会因为换行而变窄。
3. 最后一列设置width: auto，会自动占据表格剩余的所有可用空间，完美填充剩余区域。

如果后续需要调整前几列等宽，只需要修改SCSS里的$equal-column-count变量就行，非常方便~

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