如何通过CSS实现指定Bootstrap表格内所有元素左对齐？

嘿，这问题很常见，Bootstrap默认的表格样式里表头（th）通常是居中对齐的，要让整个表格的所有元素都左对齐，有几种简单的CSS方案可以选：

方案1：给目标表格添加自定义类（推荐，不影响其他表格） #

先给你的表格加一个自定义类，比如table-left-aligned：

<table class="table table-striped table-bordered table-hover table-left-aligned">
  <!-- 表格内容 -->
</table>

然后写对应的CSS规则，覆盖Bootstrap的默认对齐样式：

.table-left-aligned th,
.table-left-aligned td {
  text-align: left !important;
}

加!important是为了确保这个样式能覆盖Bootstrap自带的对齐规则，如果你的选择器优先级足够高（比如加上表格所在容器的类/id），也可以去掉!important。

方案2：直接针对现有表格类写样式（不用改HTML） #

如果不想修改HTML结构，直接用现有表格的类组合来写CSS，这样所有使用这些类的表格都会生效：

.table.table-striped.table-bordered.table-hover th,
.table.table-striped.table-bordered.table-hover td {
  text-align: left;
}

如果发现样式没生效，同样可以加上!important来提升优先级。

方案3：全局设置所有表格左对齐（谨慎使用） #

如果你希望项目里所有表格都左对齐，可以写全局样式：

table th,
table td {
  text-align: left !important;
}

注意这个会影响所有表格，包括你可能需要居中的其他表格，所以只在全局需求一致时用。

小提示 #

如果不想用!important，可以通过提升选择器优先级来覆盖样式，比如如果你的表格放在#app容器里，可以这样写：

#app .table th,
#app .table td {
  text-align: left;
}

这样选择器的优先级比Bootstrap的默认样式高，就不需要!important啦。

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