Css3实现表格隔行变色或隔列变色
Posted IT技术大神
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Css3实现表格隔行变色或隔列变色相关的知识，希望对你有一定的参考价值。
先上图：
这些都是css控制的！并不是单独的给每行添加一个样式，一起来看下样式：
tabletr:nth-child(odd){background:#eee;} /*基数行的背景原色*/
tabletd:nth-child(even){color:#A00;} /*偶数单元格文字原色*/
tabletr:nth-child(5){background:#98C4E5;color:#FFF;} /*第五行背景原色*
分别为选择为：奇数行、偶数列、第五行的相关样式
最后为整个html和CSS代码
<!doctypehtml>
<html>
<head>
<metacharset="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:#eee;} /*基数行的背景原色*/
table td:nth-child(even){color:#A00;} /*偶数单元格文字原色*/
table tr:nth-child(5){background:#98C4E5;color:#FFF;} /*第五行背景原色*/
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #ddd;}
</style>
</head>
<body>
<table>
<tr>
<th>传智播客</th>
<th>UI培训学院</th>
<th>photoshop</th>
<th>html</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>
以上是关于Css3实现表格隔行变色或隔列变色的主要内容，如果未能解决你的问题，请参考以下文章