表條紋班級不給我替代顏色

Question

我希望能爲我的桌子交替顏色。但是，在應用表條帶類後，所有行都變灰了。我試圖加載v3和v4 boostrap 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

我的猜測是，你<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> 

希望它能幫助！

Answer 2

的table-striped類在自舉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>