Question

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

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

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

Faulty zebra with nth-child css

那么有没有办法让斑马用正确的方式为这样的桌子着色？

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

<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>

Answer 1

它的布局是有效的。

它不起作用

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

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

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

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

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

Html多线表（rowspan） - 如何以正确的方式斑马？

1 个答案: