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

How can I override and modify the bootstrap 5 table border below the headline?

I want to achieve this with simple CSS override, not using SASS.

I tried the following, which did not have any effect:

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

CodePudding user response：

Playing around with it a bit, for some reason, I was only able to override the existing style by specifying the whole border-bottom property, with width, style, and color, with the width a minimum of 2px. I was also able to get the selector simplified, and remove the !important.

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>