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>