纯css表格table隔行显示不同颜色

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/baidu_20876831/article/details/80614607

方法/步骤

  1. 1

    制作简单表格,代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    table,tr,td,th{

    padding: 0;

    margin: 0;

    }

    table{

    width: 100%;

    border-color: #ccc;

    }

    table tr{

    line-height: 30px;

    border-color: #ccc;

    }

    table th,table td{

    text-align: center;

    border-color: #ccc;

    }

    </style>

    </head>

    <body>

    <table border="1" cellspacing="0">

    <tr>

    <th>1</th>

    <th>2</th>

    <th>3</th>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    </table>

    </body>

    </html>

  2. 2

    表格样式为:

    纯css表格table隔行显示不同颜色
  3. 3

    添加属性样式:

    table tr:nth-child(odd){

    background: #ccc;

    }

    结果如图所示可设置奇数行背景

    纯css表格table隔行显示不同颜色
  4. 4

    当需要偶数行背景时使用样式:

    table tr:nth-child(even){

    background: #ccc;

    }

    纯css表格table隔行显示不同颜色
展开阅读全文

没有更多推荐了,返回首页