html给表格用选择器填充颜色,使用css选择器实现表格隔行换色

使用css选择器实现表格隔行换色

*{

margin: 0;

padding: 0;

}

body{

padding: 200px;

box-sizing: border-box;

}

table{

border-collapse: collapse;

}

td,th{

color: #000;

font-size: 16px;

line-height: 30px;

border: 1px solid #333;

padding: 0 15px;

box-sizing: border-box;

}

tbody tr:nth-child(odd){

background: rgba(204,255,255,.6);

}

共享博客共享博客共享博客共享博客共享博客共享博客

鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生鹏仔先生

设置表格奇数行变色tbody tr:nth-child(odd){

background: #f7f8f9;

}

设置表格偶数行变色table tr:nth-child(even){

background: #f7f8f9;

}

扩展一：表格边框合并table{

border-collapse: collapse;

}

扩展二：带有 thead、tbody、tfoot 元素的 HTML 表格

标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

标签定义表格的页脚(脚注或表注)

标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

相关教程

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓