Bootstrap表格如何收缩small列 剩余空间分配给其他列

col-auto是Bootstrap栅格系统的专用类，仅对Flex容器（带row类的元素）的直接子元素生效。原生表格的<td>走的是表格布局模型，既没有Flex布局上下文，也不会匹配到栅格类对应的CSS选择器，直接给td加col-auto自然没有任何作用。

方案1：保留原生表格结构（改动最小，推荐） #

原生表格的布局逻辑完全可以实现“内容短的列缩到最小，剩余空间给其他列”的效果，不需要依赖Bootstrap栅格类：

• 给内容为small的单元格设置width: 1%，这是表格布局的经典技巧：表格引擎计算列宽时，会把设置了非自动宽度的列优先压缩到刚好容纳内容的最小宽度，其余没有设置固定宽度的列会自动平分剩余的全部横向空间。注意这里的1%只是触发收缩逻辑的极小值，不是真的让列只占总宽度的1%
• 给该单元格追加white-space: nowrap规则，避免文字自动换行撑宽列宽，确保收缩到内容本身的最小宽度。

可运行的测试代码：

<!-- 引入对应版本的Bootstrap资源 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td>big1</td>
    <td style="width: 1%; white-space: nowrap;">small</td>
    <td>big2</td>
  </tr>
</table>

方案2：使用Bootstrap栅格类实现，替换原生表格结构 #

如果一定要通过col-auto类实现预期效果，需要把原生表格的DOM替换为符合栅格规则的Flex结构：

• 行容器替换为带row类的div
• 两个内容为big的单元格加col类：该类会自动平分所有剩余的横向空间
• 内容为small的单元格加col-auto类：该类会完全按照自身内容的自然宽度收缩，不占用额外的剩余空间

示例代码：

<div class="table table-bordered">
  <div class="row m-0">
    <div class="col border-start p-2">big1</div>
    <div class="col-auto border-start p-2">small</div>
    <div class="col border-start p-2">big2</div>
  </div>
</div>

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