Bootstrap 4卡片主体内表格列尺寸异常：progress bar列宽度不符预期

这个问题我之前处理过好多次，根源在于Bootstrap 4的表格默认采用table-layout: auto布局——这种模式下浏览器会根据单元格内容自动调整列宽，导致你给表头和td加的col-xs-8（Bootstrap 4里xs是默认断点，直接写col-8更规范）完全起不到作用。

下面是具体的解决方案：

步骤1：强制表格使用固定布局 #

给表格添加一个自定义类（比如table-fixed），并设置table-layout: fixed和width: 100%，让表格严格按照我们指定的列宽分配空间：

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

步骤2：给表头和数据列设置正确的列宽类 #

在<th>和对应的<td>上添加Bootstrap的网格列类，比如进度条列用col-8，另一列用col-4来分配宽度比例。

步骤3：让进度条填满单元格 #

给包裹进度条的<div class="progress">设置width: 100%，确保进度条能撑满整个单元格宽度。

修改后的完整代码示例： #

<div class="card">
  <div class="card-body">
    <table class="table table-fixed">
      <thead>
        <tr>
          <th class="col-4">任务名称</th>
          <th class="col-8">进度</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-4">项目A</td>
          <td class="col-8">
            <div class="progress" style="width: 100%;">
              <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="col-4">项目B</td>
          <td class="col-8">
            <div class="progress" style="width: 100%;">
              <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这样设置后，表格就会按照你预期的比例分配列宽，进度条也能完美填满对应的单元格了。

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