无法在bootstrap -5中将背景色添加到表头

Question

我正在尝试将背景颜色添加到bootstrap表。它不会应用它。

 <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>上的任何其他样式。

要查看bg-info在<thead>中的运行情况，必须先删除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>

​