如何让Bootstrap v5.3首列占最大空间且不影响其他列

我使用Bootstrap v5.3制作表格，希望第一列扩展至最大可用空间，其余列的宽度自动适配自身最宽单元格的内容（避免像当前这样最后一列右侧出现多余空白）。

当前效果：最后一列单元格右侧存在多余空间

期望效果：各列宽度贴合内容，第一列占满剩余空间

如何仅通过Bootstrap自带类实现该效果，尽量不使用自定义CSS？

直接用Bootstrap的内置类就能解决，操作步骤如下：

1. 给表格添加基础的 table 类，它默认采用自动布局（table-layout: auto），列宽会根据内容自动调整。
2. 给第一列的所有表头（<th>）和单元格（<td>）加上 col 类——这个类来自Bootstrap的网格系统，会让第一列自动填充剩余可用空间；其余未添加col类的列，则会根据自身最宽单元格的内容确定宽度，不会出现多余空白。

示例代码：

<table class="table">
  <thead>
    <tr>
      <th class="col">第一列（占满空间）</th>
      <th>第二列</th>
      <th>第三列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col">这是一段很长的内容，会自动占满剩余可用空间</td>
      <td>短内容</td>
      <td>更短</td>
    </tr>
    <tr>
      <td class="col">另一行的长内容</td>
      <td>中等长度的内容</td>
      <td>短</td>
    </tr>
  </tbody>
</table>

如果担心小屏幕下表格溢出，还可以用 table-responsive 类包裹表格，小屏幕会自动触发横向滚动：

<div class="table-responsive">
  <table class="table">
    <!-- 上述表格内容 -->
  </table>
</div>

全程使用Bootstrap自带类即可实现，无需编写自定义CSS。

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