如何通过纯CSS修改Bootstrap 5表格表头的边框颜色和粗细？

你之前的写法不生效是因为Bootstrap 5默认将表头的下边框样式直接作用在<thead>元素上，而非<th>元素上，所以修改th的下边框属性不会有效果。

直接用以下CSS即可覆盖修改，不需要使用SASS：

/* 优先级足够时可以去掉!important */
.table > thead {
    border-bottom: 2px solid red !important;
}

如果你的自定义CSS是在Bootstrap CSS文件之后引入的，也可以用更高权重的选择器避免使用!important：

table.table > thead {
    border-bottom-color: red;
}

如果你确实需要将边框作用在每个表头单元格上，需要先清除<thead>的默认边框，再修改<th>的边框属性：

/* 清除thead默认边框 */
.table > thead {
    border-bottom: 0;
}
/* 给th设置下边框 */
.table > thead > tr > th {
    border-bottom: 1px solid red;
}

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