The table-striped class is not giving me alternate color

Question

I was hoping to have alternating color for my table. However, all rows become grey after I applied the table-striped class. I tried to load both v3 and v4 boostrap css files. And it still didn't work.

html

    <table id="maxDiversificationTable" class="investmentTable table table-striped table-bordered table-hover table-fit" style="margin-top:-55%" >
        <thead>
            <tr style="color:#337AC7" >
                <th >Tickers</th>
                <th >Current Weight</th>
                <th >New Weight</th>
                <th >Conviction</th>                
            </tr>
        </thead>
        {% for tableData in dataSet %}
        <tbody>
            <tr>
                <td>{{tableData.tickers}}</td>
                <td>{{tableData.currentWeight}}</td>
                <td>{{tableData.newWeight}}</td>
                <td>{{tableData.conviction}}</td>
            </tr>
        </tbody>
        {% endfor %}
    
    </table>

Answer 1

My guess is that your <tbody> which is also inside your for loop. So, your table is rendered like this:

<tbody>
   <tr>
       <td>{{tableData.tickers}}</td>
       <td>{{tableData.currentWeight}}</td>
       <td>{{tableData.newWeight}}</td>
       <td>{{tableData.conviction}}</td>
   </tr>
</tbody>
<tbody>
   <tr>
       <td>{{tableData.tickers}}</td>
       <td>{{tableData.currentWeight}}</td>
       <td>{{tableData.newWeight}}</td>
       <td>{{tableData.conviction}}</td>
   </tr>
</tbody>

Which is not what you want. What you want is the following:

<tbody>
   <tr>
       <td>{{tableData.tickers}}</td>
       <td>{{tableData.currentWeight}}</td>
       <td>{{tableData.newWeight}}</td>
       <td>{{tableData.conviction}}</td>
   </tr>
   <tr>
       <td>{{tableData.tickers}}</td>
       <td>{{tableData.currentWeight}}</td>
       <td>{{tableData.newWeight}}</td>
       <td>{{tableData.conviction}}</td>
   </tr>
</tbody>

So, try taking tbody out of the for loop and see if it works:

<tbody>
    {% for tableData in dataSet %}
        <tr>
            <td>{{tableData.tickers}}</td>
            <td>{{tableData.currentWeight}}</td>
            <td>{{tableData.newWeight}}</td>
            <td>{{tableData.conviction}}</td>
        </tr>
    {% endfor %}
</tbody>

Hope it helps!

Answer 2

The table-striped class is defined in Bootstrap 4's SCSS as follows:

.table-striped {
  tbody tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }
}

So, in essence, the $table-bg-accent color will be applied to every odd row (tr) in every table body (tbody) element. Since you're creating a new table body for every row, every row will have the accent color applied.

To fix, don't create a new tbody for every row:

<thead>
  <tr style="color:#337AC7">
    <th>Tickers</th>
    <th>Current Weight</th>
    <th>New Weight</th>
    <th>Conviction</th>
  </tr>
</thead>
<tbody>
  {% for tableData in dataSet %}
  <tr>
    <td>{{tableData.tickers}}</td>
    <td>{{tableData.currentWeight}}</td>
    <td>{{tableData.newWeight}}</td>
    <td>{{tableData.conviction}}</td>
  </tr>
{% endfor %}
</tbody>