覆盖 Bootstrap 表格边框折叠样式

Posted 2023-03-06

【中文标题】覆盖 Bootstrap 表格边框折叠样式

【英文标题】：Override Bootstrap table border-collapse style

【发布时间】：2014-11-25 08:17:03

【问题描述】：

Bootstrap 具有table border-collapse: collapse; border-spacing:0; 样式。我想覆盖它，所以我创建了一个类并将其应用到有问题的表中：

table.FormGroupContainer

    border-collapse: separate;
    border-spacing: 2px;

但仍然边框仍然折叠。 Chrome 元素检查器显示 Bootstrap CSS 已被覆盖，但仅在检查器中禁用样式才允许边框间距。我在 IE 11 和 Firefox 31.0 中观察到了这一点。内联样式似乎也被覆盖（如 Chrome 检查器中所示），但在我禁用 Bootstrap 样式之前无效。

CSS 加载顺序似乎也没有什么区别。 什么给了？类不是更高的特异性吗？

【问题讨论】：

Normalize.css（Bootstrap 3 的一部分）添加了折叠。 CSS 加载顺序总是会产生影响。如果将样式应用于表格，只要它在 Bootstrap css 之后并且没有其他 css 与之冲突，它将起作用：jsbin.com/bavogi/1/edit

@Christina 好的，说 Bootstrap 的 CSS 是最后加载的。 table.FormGroupContainer on: <table class="FormGroupContainer"></table> 的更高特异性是否允许 FormGroupContainer 覆盖 Bootstrap 表 CSS？

是的，如果仅此而已。请记住这是 normalize.css，它是 Bootstrap 的一部分，但单独维护。

@Christina 我注意到 Bootstrap 类有 media=screen 这会改变特异性吗？我正在使用已编译的 Bootstrap 主题，因此无法删除 Normalize.css（我有 2 个整体 Bootstrap bootstrap.min.css、bootstrap-theme.min.css 文件）。

顺便说一句，我如何将您的评论标记为有用的答案？

【参考方案1】：

加载顺序是这里的一个问题。我的样式表在之前 Bootstrap 被加载。我在样式表中为规则添加了更大的特异性，使其能够与 Bootstrap 的 table CSS 竞争。谢谢@Christina。