Question

我正在尝试为引导表添加背景颜色。它没有应用它。

 <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-dark 中使用了 <table>，它覆盖了 <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>

无法在 bootstrap -5 中为表头添加背景颜色

1 个答案: