如何修改Bootstrap 4 Beta表格行边框颜色？

你想调整的是thead（Parent所在行）和tbody（Mama所在行）之间的那条分隔线颜色对吧？原来的CSS没生效是因为选择器的层级没选对，我来给你梳理下解决方案：

问题原因 #

Bootstrap的.table组件里，thead和tbody的tr并不是直接作为table的子元素存在的——tr是被<thead>和<tbody>标签包裹的，所以你写的table > tr根本找不到对应的元素，自然不会生效。

正确的CSS方案 #

你可以通过两种方式实现需求：

方式一：给thead的行设置底部边框

直接给thead里的tr设置底部边框，覆盖Bootstrap默认样式：

.table thead tr {
  border-bottom: 2px solid black; /* 这里替换成你想要的颜色 */
}

方式二：给tbody的第一行设置顶部边框

如果更想从tbody的角度控制，就给tbody的第一个tr加顶部边框：

.table tbody tr:first-child {
  border-top: 2px solid black; /* 自定义颜色 */
}

额外说明 #

如果你还想调整单元格的边框样式，比如你原来写的红色边框，可以保留，但要注意选择器的准确性：

.table td {
  border: 1px solid red !important; /* 确保覆盖Bootstrap默认样式 */
}

这样就能精准修改你想要的那条分隔线颜色啦～

内容的提问来源于stack exchange，提问作者Björn C