Bootstrap - table-striped starting on opposite color-CodePudding

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

<table >
   <thead >
      <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?

CodePudding user response：

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>

CodePudding user response：

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

<table >
   <thead >
      <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>

CodePudding user response：

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