如何为PHP for循环生成的乘法表格添加交替颜色（禁用:nth-child）

1 调整PHP代码 #

首先修正原有HTML结构错误（p标签不能嵌套在table标签内），同时为每个单元格添加data-row、data-col自定义属性标记行列序号，无需使用:nth-child()选择器即可通过CSS属性选择器匹配对应单元格。
修改后代码如下：

<p>For loop</p>
<table border="1">
<?php
for ($i=1;  $i <= 12; $i++){
    echo "<tr class='row'> \n";             
    for ($j=1;  $j <= 12; $j++){
        $p = $i * $j;
        if ($i == $j){
            echo "<td data-row='{$i}' data-col='{$j}'>".$p."</td>";
        } else{
            echo "<th data-row='{$i}' data-col='{$j}'>".$p."</th>";
        }
    }
    echo "</tr> \n"; // 补充原有代码缺失的tr闭合标签
}
?>
</table>

2 编写外部CSS代码 #

使用CSS3属性选择器匹配不同位置的单元格实现样式，完全符合禁用:nth-child()的要求：

/* 表格基础样式 */
table {
    border-collapse: collapse;
    text-align: center;
}
table td, table th {
    padding: 8px 12px;
    border: 1px solid #ccc;
}
/* 第一行表头样式 */
table [data-row="1"] {
    background-color: #f0f8ff;
    font-weight: bold;
}
/* 第一列表头样式 */
table [data-col="1"] {
    background-color: #f0f8ff;
    font-weight: bold;
}
/* 对角线单元格高亮样式 */
table td { /* 原有逻辑中i==j时输出td，直接匹配td标签即可 */
    background-color: #ffe4e1;
    font-weight: bold;
}
/* 普通单元格样式 */
table th:not([data-row="1"]):not([data-col="1"]) {
    background-color: #fff;
    font-weight: normal;
}

如需调整不同区域的显示效果，直接修改对应选择器的属性值即可。

内容的提问来源于stack exchange，提问作者Chan Jia Xiang