表格条纹化的类没有给我交替颜色。

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>

- dickli2119

Answer 1

我猜测你的<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>

这不是你想要的。你想要的是以下内容：

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

所以，尝试将 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>

希望我的回答有所帮助！

- Jahongir Rahmonov

Answer 2

table-striped类在Bootstrap 4的SCSS中定义如下：

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

因此，实质上，$table-bg-accent 颜色将应用于每个表格主体 (tbody) 元素中的每一行奇数行 (tr)。由于您为每一行创建一个新的表格主体，因此每一行都将应用强调颜色。

要解决问题，请不要为每一行创建新的 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>

- Robby Cornelissen