这个模型的CSS + HTML？

Question

我有一个我希望用CSS + HTML实现的模型.

我开始为它做一个小提琴,这只是一张桌子,我想知道你是否可以帮我制作风格.

<table border="1">
    <tr>
        <td>grey</td>
        <td>grey</td>
        <td>grey</td>
        <td>grey</td>
        <td>grey</td>
    </tr>
    <tr>
        <td>COL1</td>
        <td>COL2</td>
        <td>COL3</td>
        <td>COL4</td>
        <td>icon1|icon2|icon3|icon4</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

如何让每隔一行变灰？我应该保留一个服务器端变量并计算一个mod 2还是有一些更简单的方法,用CSS让每隔一行变成灰色和白色？

Answer 1

你可以使用偶数或奇数.CSS:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

你甚至可以制作专栏:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

与演示的良好链接:http://www.w3.org/Style/Examples/007/evenodd.en.html

是的,这是css3技术,不适用于所有浏览器.如果你想要跨浏览器支持,请使用create class .even {}并使用php在偶数行上回显它,或使用js来做同样的事情.