首页 » 前端笔记 » 使用CSS3实现表格隔行/隔列变色

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

admin 2019-05-17 99 views 0

扫一扫用手机浏览

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

使用CSS3实现表格隔行隔列变色.png

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

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:nth-child(6n+1){background:#CCCCCC;}

分别选择为:奇数行、偶数列、第五行、从第一行开始算起,每隔6个(包含第6个)使用此样式,下面是完整代码:

<!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:nth-child(6n+1){background:#CCCCCC;}
	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>


赞(2 打赏
  • 微信
  • 支付宝
  • QQ钱包

您的支持,是我继续努力的动力!

本文由晨美工作室原创并发布于晨美博客,若需转载请设置版权!

转载请注明本文地址:https://www.chenmei.cn/12.html

最后编辑于:2019/05/17作者: admin

相关文章

阿里云如何申请配置ssl证书

阿里云SSL证书,在云上签发各品牌数字证书,实现网站HTTPS化,使网站可信,防劫持、防篡改、防监听。并进行统一生命周期管理,简化...

前端笔记 2019-07-04 阅读130 评论0

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

废话少说,先看效果,如果不是你想要的,你可以撤了。这些都是css控制的,然后我们看下样式:table tr:nth-ch...

前端笔记 2019-05-17 阅读99 评论0

发表评论