`
zlpx
  • 浏览: 153019 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5中交替变换表格的行颜色

 
阅读更多

下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #table1 {
            width: 100%;
        }
        thead {
            background-color: black;
            color: white;
            text-indent: 14px;
            text-align: left;
        }
        tbody tr:nth-child(odd) {
            background-color: rgba(0, 255, 0, 0.1); /* green, 10% alpha */
        }
        tbody tr:nth-child(even) {
            background-color: rgba(255, 0, 0, 0.3); /* red, 30% alpha */
        }
    </style>
</head>
<body>
 
    <table id="table1">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
            <tr>
                <td>Row 3, Column 1</td>
                <td>Row 3, Column 2</td>
            </tr>
            <tr>
                <td>Row 4, Column 1</td>
                <td>Row 4, Column 2</td>
            </tr>
            <tr>
                <td>Row 5, Column 1</td>
                <td>Row 5, Column 2</td>
            </tr>
            <tr>
                <td>Row 6, Column 1</td>
                <td>Row 6, Column 2</td>
            </tr>
            <tr>
                <td>Row 7, Column 1</td>
                <td>Row 7, Column 2</td>
            </tr>
            <tr>
                <td>Row 8, Column 1</td>
                <td>Row 8, Column 2</td>
            </tr>
        </tbody>
    </table>
 
</body>
</html>

 

源码下载：

alternating-row-colors-in-a-table-in-html5.zip

 

分享到：
| HTML5中用AJAX动态加载JSON文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics