如何使窄HTML表格扩展至宽表格宽度且留白仅在右侧？

完全可行，给你两个实用的实现思路：

思路一：利用表格列宽度自动填充 #

1. 外层容器div设置width: fit-content，让容器宽度由内部最宽的表格决定
2. 所有表格设置width: 100%，继承容器的宽度
3. 给表格的最后一列设置width: 100%，这样多余的空白会被最后一列独占，自然集中在表格右侧
4. 需要右对齐的列，直接给对应<td>或<th>添加text-align: right样式即可，不影响整体布局逻辑

示例代码：

.table-wrap {
  width: fit-content;
}
.table-wrap table {
  width: 100%;
  table-layout: auto; /* 默认值，显式声明确保生效 */
  border-collapse: collapse; /* 可选，根据你的样式需求调整 */
}
.table-wrap table td:last-child,
.table-wrap table th:last-child {
  width: 100%;
}
/* 右对齐列样式 */
.col-right {
  text-align: right;
}

<div class="table-wrap">
  <!-- 较窄表格 -->
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th class="col-right">余额</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td class="col-right">1200</td>
      </tr>
    </tbody>
  </table>

  <!-- 较宽表格 -->
  <table>
    <thead>
      <tr>
        <th>商品名称</th>
        <th>分类</th>
        <th>库存</th>
        <th class="col-right">单价</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>无线蓝牙耳机Pro版</td>
        <td>数码配件</td>
        <td>150</td>
        <td class="col-right">399</td>
      </tr>
    </tbody>
  </table>
</div>

思路二：CSS伪元素+JS辅助填充空白 #

如果不想改动表格列的宽度设置，可以用伪元素模拟右侧空白：

1. 外层div设置width: fit-content; position: relative
2. 表格设置width: 100%; position: relative
3. 通过伪元素填充右侧空白，配合JS计算表格实际内容宽度：

.table-wrap {
  width: fit-content;
  position: relative;
}
.table-wrap table {
  width: 100%;
  position: relative;
}
.table-wrap table::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #fff; /* 匹配表格背景色 */
  width: calc(100% - var(--table-content-width));
}

document.querySelectorAll('.table-wrap table').forEach(table => {
  const contentWidth = table.scrollWidth;
  table.style.setProperty('--table-content-width', `${contentWidth}px`);
});

这个方法适合不想调整表格列结构的场景，但需要JS辅助计算，不如思路一简洁。

两种方案都能保留HTML表格的语义化，同时满足对齐和空白分布需求，右对齐列的样式也能正常生效。

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