A class with a striped table doesn't give me an alternative color

Question

I was hoping to have a varying color for my table. However, all lines turn gray after I applied the class with a stripe. I tried to download css files with extension v3 and v4. 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

I assume yours <tbody>, which is also inside the for loop. So your table is displayed as follows:

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

This is not what you want. You want 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 pulling tbodyout 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 this helps!

Answer 2

table-striped Bootstrap 4 SCSS :

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

, , $table-bg-accent (tr) body (tbody). , .

, tbody :

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

Hide result