tablestriped类没有给我altern

Question

我希望我的桌子能有交替的颜色。但是，在我应用了table striped类之后，所有行都变成灰色。我尝试加载v3和v4 bootstrap css文件。但还是没用。在

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

table-striped类在引导程序4的scs中定义如下：

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

因此，本质上，$table-bg-accent颜色将应用于每个表体（tbody）元素中的每一个奇数行（tr）。因为要为每一行创建一个新的表体，所以每一行都会应用强调色。在

要修复，请不要为每一行创建一个新的tbody：

和13；

Answer 2

我猜你的<tbody>也在for循环中。因此，您的表是这样呈现的：

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

这不是你想要的。你想要的是：

^{pr2}$

因此，请尝试将tbody从for循环中取出，看看它是否有效：

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

希望有帮助！在