Bootstrap - table-striped starting on opposite color

user_15814838 0
Viewed 166

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?

bootstrap-4 html-table css html
3 Answers

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

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

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;
    }
user_48595020
Related