如何更改表格标题边框颜色和大小？答案

【问题标题】：How to change table header border color and size?如何更改表格标题边框颜色和大小？
【发布时间】：2021-11-30 05:53:08
【问题描述】：

https://getbootstrap.com/docs/5.1/content/tables/#overview

如何覆盖和修改标题下方的 bootstrap 5 table 边框？

我想通过简单的 CSS 覆盖来实现这一点，而不是使用 SASS。

我尝试了以下，没有任何效果：

.table > thead > tr > th {
    border-bottom-color: red !important;
}

【问题讨论】：

这是因为border-collapse，阅读更多here

标签： css twitter-bootstrap

【解决方案1】：

尝试了一下，由于某种原因，我只能通过指定整个 border-bottom 属性来覆盖现有样式，包括宽度、样式和颜色，宽度至少为 2px。我还能够简化选择器，并删除 !important。

.table thead th {
  border-bottom: 2px solid red;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Heretic</td>
      <td>Monkey</td>
      <td>Heretic Monkey</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

看看https://github.com/twbs/bootstrap/issues/35342

这是可以去除边框的CSS

.table > :not(:first-child) {
    border-top: 0;
}

然后你可以应用你自己的样式

【讨论】：