无法将背景颜色添加到 bootstrap 中的 table header -5

Question

我正在尝试为 bootstrap table 添加背景颜色。它没有应用它。

 <table class="table table-dark table-hover">
        <thead class="bg-info text-white">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
</table>

也试过这个

    <tr class="bg-info text-white">

它不工作。

我正在使用 bootstrap-5。

这里出了什么问题？

Answer 1

这是因为您在 <table> 中使用了 table-dark，它覆盖了 <thead> 中的任何其他样式。

要在 <thead> 中查看 bg-info 的实际效果，您必须先删除 table-dark。

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!--With table-dark-->
 <table class="table table-dark table-hover">
   <thead class="bg-info text-white">
       <tr>
           <th scope="col">#</th>
           <th scope="col">First</th>
           <th scope="col">Last</th>
           <th scope="col">Handle</th>
       </tr>
   </thead>
</table>

<!--Without table-dark-->
<table class="table table-hover">
   <thead class="bg-info text-white">
       <tr>
           <th scope="col">#</th>
           <th scope="col">First</th>
           <th scope="col">Last</th>
           <th scope="col">Handle</th>
       </tr>
   </thead>
</table>

无法将背景颜色添加到 bootstrap 中的 table header -5

Not able to add background color to the table header in bootstrap -5

react-bootstrap

bootstrap-table

bootstrap-4

bootstrap-5