Html 多行表（行跨度） - 如何以正确的方式斑马？答案

【问题标题】：Html multilines tables (rowspan) - how to zebra the right way?Html 多行表（行跨度） - 如何以正确的方式斑马？
【发布时间】：2012-03-09 15:22:41
【问题描述】：

我有下表，第一行包含 2 个子行，第二行包含 3 个子行。

对于这种 css 样式，斑马颜色（即连续两行的交替颜色）有问题，第二个主单元格应为白色，而不是灰色：

 tr:nth-child(odd)  {background-color: #eee;}
 tr:nth-child(even) {background-color: #fff;}

那么有没有办法以正确的方式为这样的表格着色？

当然，我真正的问题是处理更多的行，以及更多可变数量的子行。

<head>
    <style>
        tr:nth-child(odd)  {background-color: #eee;}
        tr:nth-child(even) {background-color: #fff;}
    </style>
<head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">
                Big1
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                Big2
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td>
                small3
            </td>
        </tr>
    </table>
</body>

【问题讨论】：

什么是“斑马色”？
添加了斑马颜色的定义：连续两行交替颜色
您希望斑马条纹看起来像什么？
在包含的图像上，我希望 Big2 为白色，而不是灰色，因为它与灰色单元格 (Big1) 连续
您看到的是“正确”的方式。您的单元格跨越多行，因此您必须为每个单元格分配特定的颜色。

标签： html css html-table

【解决方案1】：

它按布局工作。

它不工作

    <tr>
        <td rowspan="2">
            Big1
        </td>
        <td>
            small1
        </td>
    </tr>

将是灰色的，它是第一个 TR（奇数）

    <tr>
        <td>
            small2
        </td>
    </tr>

将是白色的，它的第二个 TR（偶数）等等。

最好的方法是手动将“奇数”和“偶数”类分配给有问题的 tr。

【讨论】：

确实，我得出了同样的结论。谢谢，你得到了积分