table-striped 类没有给我替代颜色

Posted 2023-02-24

【中文标题】table-striped 类没有给我替代颜色

【英文标题】：The table-striped class is not giving me alternate color

【发布时间】：2018-01-19 09:42:02

【问题描述】：

我希望我的桌子有交替的颜色。但是，在我应用 table-striped 类后，所有行都变成灰色。我尝试加载 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>

【参考方案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>

希望对你有帮助！

【参考方案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>