Bootstrap表格表头颜色无法修改，自定义样式不生效求助

为什么样式不生效？ #

你给<table>添加的.custom-table背景色没作用到表头，核心原因是Bootstrap自带的thead-light类直接给<thead>元素设置了背景样式，它的CSS优先级比你加在<table>上的样式更高，且<thead>的背景会覆盖<table>的背景。

解决方法 #

方法1：覆盖thead-light的默认样式 #

直接针对表头的类设置样式，确保优先级足够覆盖Bootstrap默认规则：

.custom-table .thead-light {
    background-color: rgb(249, 159, 25);
}

如果你的需求是修改表头文字颜色（比如你提到的“始终显示白色”指文字），则添加color属性：

.custom-table .thead-light th {
    color: #333; /* 替换为你需要的文字颜色 */
}

方法2：移除thead-light类 #

如果不需要Bootstrap默认的表头样式，直接删掉<thead>标签上的thead-light类，然后给表头设置样式：

.custom-table thead {
    background-color: rgb(249, 159, 25);
}

额外注意 #

确保你的自定义CSS代码是在Bootstrap CSS文件之后引入的，这样自定义样式才能正确覆盖默认样式。

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