这个模型的CSS + HTML？

Question

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

我为它开了一个fiddle，这只是一张桌子，我想知道你是否可以帮我制作风格。

<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来做同样的事情。

Answer 2

看看这是否有助于你兄弟： JSfiddle

table{ width:100%; text:align:center;border:1px solid #00F; font-size:12px;}
th{background:#EEE;width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
td{width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
tr:nth-child(even) {background: #EEE;}