<center>使用CSS3实现表格隔行/隔列变色</center>

最新推荐文章于 2024-01-24 16:29:20 发布

mikibiubiu

最新推荐文章于 2024-01-24 16:29:20 发布

阅读量1.6k

点赞数

分类专栏：前端面试文章标签： css 样式

原文链接：http://www.qdker.com/archives/103.html

版权

前端面试专栏收录该内容

16 篇文章 0 订阅

订阅专栏

废话少说，先看效果，如果不是你想要的，你可以撤了~
在这里插入图片描述
这些都是css控制的，然后我们看下样式：

table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Css3实现表格隔行变色或隔列变色</title>
<style>
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;}
</style>
</head>
<body>
<table>
 <tr>
 <th>xHTML+CSS</th>
 <th>HTML5+CSS3</th>
 <th>Javascript</th>
 <th>jQurey</th>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
</table>
</body>
</html>

mikibiubiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
<center>使用CSS3实现表格隔行/隔列变色</center>

废话少说，先看效果，如果不是你想要的，你可以撤了~这些都是css控制的，然后我们看下样式：table tr:nth-child(odd){background:#F4F4F4;}table td:nth-child(even){color:#C00;}table tr:nth-child(5){background:#73B1E0;color:#FFF;}分别选择为：奇数行、偶数列、...
复制链接

扫一扫