How to change table header border color and size?

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/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>

Take a look at https://github.com/twbs/bootstrap/issues/35342

Here is the CSS that can remove the border

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

Then you can apply your own styling

There are couple of solutions you can try.

Solution 1.

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

Take a look at this github issue

Solution 2.

other one is add table-borderless class to the table as given below

<table class="table table-dark table-borderless">
  ...
</table>

then you can give your custom border classes to that table.

e.g.

#myTable table,
thead,
tbody,
tr {
  border-bottom: 1px solid black !important;
}

actually in my case 1st solutions didn't worked but by using 2nd one I am able to apply my custom border css.

Hope this will also useful for someone.