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

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

使用CSS3实现表格隔行/隔列变色
这些都是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>

 

作者:小屋
链接:http://www.rumenwu.com/site/1660.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(5)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2020-11-16 23:36
下一篇 2020-11-24 01:24

相关推荐

  • WordPress代码实现 外链图片 自动本地化

    WordPress的许多插件或代码可以在编辑文章时自动将外部图片下载到本地。 最后,我选择了一个名为Easy Copy Paste的插件。 单个操作之后,您只需单击更新按钮即可编辑文章,以将文章中的外部链接图像下载到本地并替换链接。但是,逐篇编辑文章不仅麻烦,而且工作量很大。 这是您可以批量下载文章中外部图片的一个小技巧。批处理操作该插件的代码不仅可以通过单…

    2022-04-10
    1.2K0
  • WordPress SMTP邮件发送插件:Easy WP SMTP

    现在很多站长问入门屋小编:WordPress如何实现注册、找回密码邮件验证通知功能,每次回答相同的问题,今天入门屋小编推荐一个WordPress SMTP邮件发送插件:Easy WP SMTP 邮件发送是网站的基础功能,WordPress在注册、找回密码、评论通知等地方也会涉及到邮件的发送。一般的虚拟主机都是有自带PHP邮件功能的,VPS、云服务器的话,则是…

    2018-08-30
    4.0K0
  • 怎样迁移网站服务器和域名?

    继续回答有普遍性的问题。今天是一个网站服务器和域名迁移的问题。 读者Pete Zhang问: Zac你好,占用你的宝贵时间,向你请教个问题。想要迁移网站,内容基本不变,但域名不同,服务器也不同,我该如何是好? 问题描述:我经营一个小公司,公司有一个网站(域名假设是www.AAA.com),网站的服务器在美国(IP假设是1.1.1.1)。公司的所有业务都来自w…

    2021-04-20
    6600
  • WordPress响应式主题添加视频手机端不显示问题解决办法

    随着移动互联网的发展,现在手机端的流量占比越来越大,响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受,不过由于电脑和手机系统兼容性的问题,很多用户遇到视频播放的问题:在网站添加的视频在电脑上可以正常播放,一到手机上就无法显示。 问题原因 电脑上一般都会安装flash控件,视频大多也是使用flash播放器来播放的,而手机端目前网页播放视频都…

    2018-10-16
    3.0K0
  • 纯css实现移动端水平滚动导航

    目前最简单呈现效果最好的纯css实现移动端水平滚动导航解决方案。 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> <meta name=”viewport” content…

    2020-10-27
    1.2K0
  • 织梦CMS通用安装教程

    今天先跟大家介绍一下dedecms织梦系统安装的方法步骤,以及织梦数据库还原的教程。详细请看图文讲解:1.运行 http://域名/install/index.php(比如你的域名是:http://www.rumenwu.com/,就输入http://www.rumenwu.com/install/index.php) (注)输入网址 http://域名/i…

    2018-03-08
    2.1K0