如何在CodeIgniter Bootstrap中实现两列表格的第二列垂直对齐

嘿，这个坑我之前踩过！Bootstrap的表格默认是自适应内容宽度的，所以两个表格里的内容长度不一样时，列宽就会“各自为政”，导致第二列没法对齐。给你几个简单有效的解决方案：

方法1：用Bootstrap内置的网格列类（最推荐） #

直接给表格的<th>和<td>加上Bootstrap的col-*类，强制列按比例分配宽度，不管内容多少，两个表格的列宽都会完全统一。

比如想让第一列占1/3，第二列占2/3，代码可以这么写：

<!-- 第一个表格 -->
<table class="table">
  <thead>
    <tr>
      <th class="col-4">左侧标题</th>
      <th class="col-8">右侧标题</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>短内容</td>
      <td>这里是一段比较长的测试内容，用来验证列宽是否稳定</td>
    </tr>
  </tbody>
</table>

<!-- 第二个表格 -->
<table class="table">
  <thead>
    <tr>
      <th class="col-4">左侧标题</th>
      <th class="col-8">右侧标题</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>这是更长的左侧内容，但列宽不会变</td>
      <td>短内容</td>
    </tr>
  </tbody>
</table>

只要两个表格的col-*类设置一致，第二列就会完美垂直对齐，而且还能适配响应式布局，在手机上自动调整。

方法2：用CSS固定表格布局 #

如果需要更精细的宽度控制（比如固定像素宽度），可以给表格加上table-layout: fixed属性，强制表格按预设的列宽渲染，不随内容变化。

先写自定义CSS：

/* 固定布局表格的样式 */
.fixed-col-table {
  table-layout: fixed;
  width: 100%; /* 必须设置宽度才能让fixed布局生效 */
}
/* 第一列固定宽度为200px */
.fixed-col-table th:first-child,
.fixed-col-table td:first-child {
  width: 200px;
  white-space: nowrap; /* 可选：防止内容换行撑宽列 */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 第二列自动填充剩余宽度 */
.fixed-col-table th:last-child,
.fixed-col-table td:last-child {
  width: calc(100% - 200px);
}

然后给两个表格都加上这个类：

<table class="table fixed-col-table">
  <!-- 表格内容 -->
</table>

这种方法适合需要固定某一列宽度的场景，比如左侧是固定长度的ID或名称，右侧是可变内容。

额外注意点 #

• 确保两个表格所在的父容器宽度一致，比如都放在.container或.container-fluid里，不然就算列比例一样，实际宽度也会因为容器不同而错位。
• 如果用的是Bootstrap 4，col-*类的用法和Bootstrap 5完全一致，不用担心版本兼容问题。

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