html table隔行变色,使用CSS3实现表格隔行/隔列变色

最新推荐文章于 2024-09-30 16:36:43 发布

Well Honey

最新推荐文章于 2024-09-30 16:36:43 发布

阅读量1.8k

点赞数

文章标签： html table隔行变色

这篇博客介绍了如何使用CSS3选择器来实现表格中奇数行、偶数列以及特定行的背景色和文字颜色变化。通过`nth-child()`选择器，可以轻松地为HTML表格实现隔行变色和隔列变色的效果，同时展示了当鼠标悬停在行上时的高亮样式。示例代码包括完整的CSS样式和HTML结构，适合前端开发者参考学习。

摘要由CSDN通过智能技术生成

废话少说，先看效果，如果不是你想要的，你可以撤了~

这些都是css控制的，然后我们看下样式：

table tr:nth-child(odd){background:#F4F4F4;}

table td:nth-child(even){color:#C00;}

table tr:nth-child(5){background:#73B1E0;color:#FFF;}

分别选择为：奇数行、偶数列、第五行，下面是完整代码：

Css3实现表格隔行变色或隔列变色

body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}

table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}

table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}

table tr:nth-child(odd){background:#F4F4F4;}

table td:nth-child(even){color:#C00;}

table tr:nth-child(5){background:#73B1E0;color:#FFF;}

table tr:hover{background:#73B1E0;color:#FFF;}

table td,table th{border:1px solid #EEE;}

xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey
xHTML+CSS	HTML5+CSS3	Javascript	jQurey

作者：小屋

链接：http://www.rumenwu.com/site/1660.html

来源：入门屋

入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。