Bootstrap如何为表格最后一列添加info颜色边框？

首先，Bootstrap没有内置专门针对表格最后一列添加Info色边框的类，所以我们需要通过自定义CSS来实现，不过可以复用Bootstrap的Info主题色值来保持风格统一。

你的代码未生效的可能原因 #

你写的CSS没生效，大概率是因为选择器优先级不够——Bootstrap自带的表格样式（比如.table td）和你的.admin td选择器权重相同，如果你的自定义CSS在Bootstrap CSS之前加载，就会被覆盖。另外，如果你是给单个<td>加了admin类，那你的选择器.admin td是错误的，应该写成td.admin。

正确的实现方式 #

1. 先确认Bootstrap Info色的色值

Bootstrap的Info主题色默认边框色是#bee5eb（对应Sass变量$info-border），背景色是#d1ecf1，你可以直接用这个色值，确保和Bootstrap风格统一。

2. 调整CSS选择器优先级

假设你的表格用了Bootstrap的.table类，并且给表格添加了admin类（这样更合理，不用给每个td单独加类），可以这样写：

/* 确保这段CSS在Bootstrap的CSS之后加载 */
.table.admin td:last-child {
  /* 给最后一列的所有边框设置Info色 */
  border-left: 1px solid #bee5eb;
  border-right: 1px solid #bee5eb;
  border-top: 1px solid #bee5eb;
  border-bottom: 1px solid #bee5eb;
  /* 如果只需要特定边的边框，删掉不需要的属性即可 */
}

对应的HTML结构：

<table class="table admin">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>最后一列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>最后一列内容</td>
    </tr>
  </tbody>
</table>

3. 如果你用Sass（可选）

如果你的项目用Sass编译，可以直接继承Bootstrap的边框类，写法更优雅：

.table.admin td:last-child {
  @extend .border-info;
}

额外提示 #

• 尽量避免使用!important，除非万不得已——通过提升选择器优先级（比如加上.table前缀）就能解决样式覆盖问题。
• 如果你的表格是带边框的（用了.table-bordered类），自定义边框样式会更贴合Bootstrap的默认风格。

内容的提问来源于stack exchange，提问作者Mateusz Bacławski