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

 时间:2024-10-14 13:45:09

1、制作简单表格,代码如下:<!DOCTYP苇质缵爨E html><html> <head> <meta c茑霁酌绡harset="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、表格样式为:

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

4、当需要偶数行背景时使用样式:table tr:nth-child(even){background: #ccc;}

纯css表格table隔行显示不同颜色
  • Shell如何使用位置变量
  • 田园图片设计
  • 家里应该放些什么花
  • QQ怎么设置不允许陌生人赞我的说说?
  • Webstrom如何查看本地Git更改的记录
  • 热门搜索
    阿尔卑斯山旅游 旅游责任险 山东旅游政务网 仙女山旅游 广州旅游路线 大连海岛旅游 香港旅游地图 佛山旅游攻略 阳光旅游网 台湾岛旅游网