'Bootstrap - table-striped starting on opposite color

My striped bootstrap table starts with the gray color after the heading in each case.

<table class="table table-striped table-bordered text-nowrap display-23">
   <thead class="fw-bold bg-gray">
      <tr>
         <th scope="col">Title 1</th>
         <th scope="col">Title 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>One</td>
         <td>Two</td>
      </tr>
      <tr>
         <td>Three</td>
         <td>Four</td>
      </tr>
   </tbody>
</table>

Codeply Example

I want to reverse the order of the colors so that the first row color after the heading is white, instead of gray. Does anyone know the best way to implement this?

htmlcssbootstrap-4html-table


Solution 1:[1]

Simply insert a blank hidden tr in the body:

      <tbody>
           <tr style="display:none">
          </tr>
          <tr>
             <td>One</td>
             <td>Two</td>
          </tr>
          <tr>
             <td>Three</td>
             <td>Four</td>
          </tr>
       </tbody>

Solution 2:[2]

You can remove table-striped class and add class="active" in <tr> where ever you want the gray color.

<table class="table table-bordered text-nowrap display-23">
   <thead class="fw-bold bg-gray">
      <tr>
         <th scope="col">Title 1</th>
         <th scope="col">Title 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>One</td>
         <td>Two</td>
      </tr>
      <tr class="table-active">
         <td>Three</td>
         <td>Four</td>
      </tr>
   </tbody>
</table>

Solution 3:[3]

Add this to your css file:

    .table-striped>tbody>tr:nth-child(2n+1)>td,
    .table-striped>tbody>tr:nth-child(2n+1)>th {
            background-color: white;
    }

    .table-striped>tbody>tr:nth-child(n+2)>td,
    .table-striped>tbody>tr:nth-child(n+2)>th {
            background-color: grey;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 K K
Solution 2 Sumit Sharma
Solution 3 nourhomsi

Related Questions