Question

Halloo伙计们，我在这里有一个表数据，其中某些列下有两列，我的问题是我该如何与另一列下两列的颜色交替显示在图像下？我需要您的帮助，谢谢！！

这些是我使用的代码示例，我该怎么办？，请帮忙！，谢谢！。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        
            <div id="matrix">
              <h2>Summary | <?php echo $sum_TOTAL_sp; ?> SPs</h2>
              <h3>Actual Matrix | As of <?php echo $dbupdate; ?></h3>            
              <table class="table table-bordered table-hover">
                  <tr>
                    <td rowspan="2" align="center"><b>FUNDING YEAR</b></th><td colspan="9" align="center"><b>PARAMETERS</b></th>
                  </tr>
                  <tr>
                    <td>PA Under Prep</td>
                    <td>Obligation Rate</td><td colspan="2">Disbursement Rate</td>
                    <td colspan="2">Liquidation Rate</td><td colspan="2">Completion Rate</td>
                    <td>Delivery Rate</td>
                  </tr>
                  <tr>
                    <td>2012</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2012; ?>" data-toggle="modal" data-target="#UNDER_PREP_2012" ><?php echo $ave_percentage_UNDER_PREP_2012; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2012; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2012; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2012; ?>"><?php echo $Undisbursement_Rate_Percentage_2012; ?><font size="1px"> Undisbursed</font></a></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2012; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2012; ?>"><?php echo $Unliquidated_Rate_Percentage_2012; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2012; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2012; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2012"><?php echo $ave_percentage_NOT_YET_COMPLETED_2012; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2012 ?></td>
                  </tr>
                  <tr>
                    <td>2013</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2013; ?>" data-toggle="modal" data-target="#UNDER_PREP_2013"><?php echo $ave_percentage_UNDER_PREP_2013; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2013; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2013; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2013; ?>"><?php echo $Undisbursement_Rate_Percentage_2013; ?><font size="1px"> Undisbursed</font></a></td></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2013 ; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2013; ?>"><?php echo $Unliquidated_Rate_Percentage_2013; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2013; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2013; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2013"><?php echo $ave_percentage_NOT_YET_COMPLETED_2013; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2013 ?></td>
                  </tr>
                  <tr>
                    <td>2014</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2014; ?>" data-toggle="modal" data-target="#UNDER_PREP_2014"><?php echo $ave_percentage_UNDER_PREP_2014; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2014; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2014; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2014; ?>"><?php echo $Undisbursement_Rate_Percentage_2014; ?><font size="1px"> Undisbursed</font></a></td></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2014 ; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2014; ?>"><?php echo $Unliquidated_Rate_Percentage_2014; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2014; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2014; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2014"><?php echo $ave_percentage_NOT_YET_COMPLETED_2014; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2014 ?></td>
                  </tr>
                  <tr>
                    <td>2015</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2015; ?>" data-toggle="modal" data-target="#UNDER_PREP_2015"><?php echo $ave_percentage_UNDER_PREP_2015; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2015; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2015; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2015; ?>"><?php echo $Undisbursement_Rate_Percentage_2015; ?><font size="1px"> Undisbursed</font></a></td></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2015 ; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2015; ?>"><?php echo $Unliquidated_Rate_Percentage_2015; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2015; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2015; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2015"><?php echo $ave_percentage_NOT_YET_COMPLETED_2015; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2015 ?></td>
                  </tr>
                  <tr>
                    <td>2016</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2016; ?>" data-toggle="modal" data-target="#UNDER_PREP_2016"><?php echo $ave_percentage_UNDER_PREP_2016; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2016; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2016; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2016; ?>"><?php echo $Undisbursement_Rate_Percentage_2016; ?><font size="1px"> Undisbursed</font></a></td></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2016 ; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2016; ?>"><?php echo $Unliquidated_Rate_Percentage_2016; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2016; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2016; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2016"><?php echo $ave_percentage_NOT_YET_COMPLETED_2016; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2016 ?></td>
                  <tr>
                    <td>2017</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2017; ?>" data-toggle="modal" data-target="#UNDER_PREP_2017"><?php echo $ave_percentage_UNDER_PREP_2017; ?></a></td>
                    <td><?php echo $ave_percentage_obligation_rate_2017; ?></td>
                    <td><?php echo $Disbursement_Rate_Percentage_2017; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDERSBURSEMENT_2017; ?>"><?php echo $Undisbursement_Rate_Percentage_2017; ?><font size="1px"> Undisbursed</font></a></td></td>
                    <td><?php echo $Liquidation_Rate_Percentage_2017 ; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNLIQUIDATED_2017; ?>"><?php echo $Unliquidated_Rate_Percentage_2017; ?><font size="1px"> Unliquidated</font></a></td>
                    <td><?php echo $ave_percentage_COMPLETED_2017; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2017; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2017"><?php echo $ave_percentage_NOT_YET_COMPLETED_2017; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2017 ?></td>
                  </tr>
                  <tr>
                    <td>2018</td>
                    <td><a href="#" style="color:<?php echo $colorlink_UNDER_PREP_2018; ?>" data-toggle="modal" data-target="#UNDER_PREP_2018"><?php echo $ave_percentage_UNDER_PREP_2018; ?></a></td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td><?php echo $ave_percentage_COMPLETED_2018; ?></td>
                    <td><a href="#" style="color:<?php echo $colorlink_NOT_YET_COMPLETED_2018; ?>" data-toggle="modal" data-target="#NOT_YET_COMPLETED_SUMMARY_2018"><?php echo $ave_percentage_NOT_YET_COMPLETED_2018; ?> <font size="1px">Remaining</font></a></td>
                    <td><?php echo $ave_percentage_DELVIRY_RATE_2018 ?></td>
                  </tr>
              </table>
            </div>

Answer 1

创建具有以下颜色的类：

.color-red {
  color: #ff0000;
}

将其放在需要着色的列中。

Answer 2

只需添加

tr td:nth-child(even) {
    background-color: color;
}

您的代码，它应该可以正常工作。该代码的作用是每隔<td>中的<tr>进行一次选择，并为其背景上色。

如何在表列中替换颜色

2 个答案: