Bootstrap v4.1表格中如何对齐<th>与<td>元素？

嘿，我之前也踩过Bootstrap 4表格用flexbox布局时和不对齐的坑，给你几个实用的解决思路，亲测有效：

1. 先确认：别破坏Bootstrap表格的基础逻辑 #

Bootstrap 4的原生表格是基于表格布局（table-layout）设计的，如果强行把<tr>改成flex容器，很容易和默认样式冲突导致对齐失效。如果不是必须用flex，优先用Bootstrap自带的表格对齐方案：比如给表格加table-fixed类，然后设置列宽，原生布局对齐会更省心。

如果一定要用flex布局，那核心原则是让对应位置的和拥有完全一致的flex属性，具体操作如下：

2. 统一flex属性实现对齐 #

给所有行（不管是表头行还是内容行）设置flex布局，然后给每个和对应的设置相同的flex值：

示例代码（自定义flex表格） #

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <link rel="stylesheet" href="css/bootstrap-4.1.0-dist/css/bootstrap.css">
  <style>
    /* 自定义flex表格样式 */
    .flex-table-row {
      display: flex;
      width: 100%;
      border-bottom: 1px solid #dee2e6; /* 模拟表格边框 */
    }
    /* 统一表头和单元格的flex属性、内边距 */
    .flex-table-row th,
    .flex-table-row td {
      padding: 0.75rem;
      flex: 1; /* 所有列均分宽度 */
    }
    /* 给特定列设置不同宽度（比如第一列占比更大） */
    .flex-table-row th:first-child,
    .flex-table-row td:first-child {
      flex: 2; /* 第一列宽度是其他列的2倍 */
    }
    /* 固定宽度列的处理 */
    .fixed-col {
      flex-shrink: 0; /* 禁止收缩 */
      width: 120px; /* 固定宽度 */
    }
  </style>
</head>
<body ng-app="App" ng-controller="...">
  <!-- 用div模拟flex表格结构 -->
  <div class="container mt-4">
    <div class="flex-table-row">
      <th>序号</th>
      <th>商品名称</th>
      <th class="fixed-col">操作</th>
    </div>
    <div class="flex-table-row">
      <td>1</td>
      <td>Bootstrap实战指南</td>
      <td class="fixed-col"><button class="btn btn-sm btn-primary">编辑</button></td>
    </div>
  </div>
</body>
</html>

3. 用Bootstrap自带flex类快速实现 #

如果你不想写自定义CSS，可以直接用Bootstrap 4的flex工具类：

• 给<tr>添加d-flex类，把行变成flex容器
• 给和添加flex-fill类，让它们自动填充行宽并对齐
• 需要固定宽度的列，加flex-shrink-0并设置width

示例代码（用Bootstrap工具类） #

<tr class="d-flex">
  <th class="flex-fill">用户ID</th>
  <th class="flex-fill">用户名</th>
  <th class="flex-shrink-0" style="width: 150px">操作</th>
</tr>
<tr class="d-flex">
  <td class="flex-fill">1001</td>
  <td class="flex-fill">Obito</td>
  <td class="flex-shrink-0" style="width: 150px"><button class="btn btn-sm btn-danger">删除</button></td>
</tr>

4. 排查自定义样式干扰 #

别忘了检查你的admin.css里有没有写影响单元格宽度的样式：比如给或设置了不同的margin、width，或者flex属性不一致，这些都会导致对齐失效。可以用浏览器F12开发者工具，对比对应和的计算样式，确保它们的flex属性、内边距、宽度完全一致。

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