table css 奇偶样式解决办法-HTML教程-爱易网页

table css 奇偶样式解决办法

日期：2014-05-17　浏览次数：20759 次

table css 奇偶样式
纯CSS 奇偶样式
谢绝JS脚本

<html>
...忽略

------解决方案--------------------
CSS3可以？
------解决方案--------------------
间隔tr写class
或者
打td th的注意（不符合标准）

HTML code


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>    
        <style>
            td {
                background:#eee;
            }
            th {
                font-weight:normal;
                background:#ddd;
            }
        </style>        
    </head>
    <body>
        <table>
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
            <tr>
                <th>1-1</th>
                <th>1-1</th>
                <th>1-1</th>
            </tr>
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
        </table>
    </body>
</html>

------解决方案--------------------
https://developer.mozilla.org/en/CSS/:nth-child
IE9+

------解决方案--------------------
http://www.cnblogs.com/xihulangzi/articles/939591.html

------解决方案--------------------
定义2个class样式
奇数行偶数行用不同的。

------解决方案--------------------
这个又把问题复杂化了。。。。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

table css 奇偶样式解决办法

相关资料更多>

推荐阅读更多>