设置table隔行变色

 时间:2026-02-13 01:05:37

1、1.新建html页面。如图:

设置table隔行变色

2、创建table表格。如图:

设置table隔行变色

3、对表格设置基本样式。如图:

设置table隔行变色

4、为了增加显示效果对每行添加一个序号,然后在浏览器上打开。如图:

设置table隔行变色

5、使用伪类选择器—nth-child(n)设置表格隔行变色。效果如图:

设置table隔行变色

设置table隔行变色

6、代码:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>table隔行变色</title>    <style type="text/css">        table{ border-collapse:collapse;}        table tr td{border: 1px solid #e7e7e7; height: 25px; }        .w60{width: 60px;}        .w100{width: 100px;}        .text-c{text-align: center;}        table tr:nth-child(2n){background-color: #fbc9a7}    </style></head><body>    <table cellpadding="0" cellspacing="0" >        <tr>            <td class="w60 text-c">1</td>            <td></td>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td class="w60 text-c">2</td>            <td></td>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td class="w60 text-c">3</td>            <td></td>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td class="w60 text-c">4</td>            <td></td>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td class="w60 text-c">5</td>            <td></td>            <td></td>            <td></td>            <td></td>        </tr>    </table></body></html>

  • 如何使用JS实现拖放图片到div中的功能
  • java.lang.UnsatisfiedLinkError
  • jquery怎样给input自定义属性?
  • jquery怎么获得元素的属性id值
  • jquery如何四舍五入保留两位小数
  • 热门搜索
    孔雀图片大全大图 口角炎的治疗方法 恐龙大全 裙子的英文怎么说 鱼怎么做好吃又简单 win7怎么看显卡 红烧武昌鱼的家常做法 辣椒面怎么做辣椒油 社交恐惧症怎么治疗 香港精选免费资料大全