使用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
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

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

相关推荐

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

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

    2022-04-10
    5940
  • Apache伪静态规则文件.htaccess的另类用法

    1、开启/关闭拼写检查(关闭后会区分大小写) CheckSpelling On #开启 CheckSpelling Off #关闭 关闭拼写检查可以解决一下报错 2、禁止/只允许特定IP访问 (1) 禁止单个IP访问,例如192.168.1.1 Order Allow,Deny Allow from all Deny from 192.168.1.1 (2)…

    2019-10-06
    2.8K0
  • WordPress SMTP邮件发送插件:Easy WP SMTP

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

    2018-08-30
    3.9K0
  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

    随着HTTPS的不断普及,越来越多的网站开启了HTTPS,给网站加上了小绿锁标识,作为全球知名的建站系统,WordPress对于HTTPS的兼容性是非常好的,几乎不用任何修改,只需要服务器配置好证书即可使用https链接访问。但是经常有用户反馈开启了以后地址栏没有绿色的锁(chrome浏览器),下面简单介绍下配置教程。 以下配置教程是基于已经在服务器配置好S…

    2018-04-15
    2.5K0
  • 政府网站标准及网页设计规范

    国务院办公厅关于印发政府网站发展指引的通知  国办发〔2017〕47号各省、自治区、直辖市人民政府,国务院各部委、各直属机构: 《政府网站发展指引》已经国务院同意,现印发给你们,请认真贯彻执行。 国务院办公厅 2017年5月15日 (此件公开发布) 政府网站发展指引为进一步加强政府网站管理,引领各级政府网站创新发展,深入推进互联网政务信息数据和便民…

    2020-11-08
    2.0K0
  • 政府网站建设网页设计规范

    政府网站要方便公众浏览使用,页面内容要便于复制、保存和打印。要最大限度减少用户额外安装组件、控件或插件;确需使用的,要便于在相关页面获取和安装。应用系统、附件、视频等应有效可用,名称要直观准确。附件、视频等格式应便于常用软件打开,避免用户额外安装软件。避免使用悬浮、闪烁等方式,确需使用悬浮框的必须具备关闭功能。 1.首页不宜过长。在主流计算机配置和当地平均网…

    2020-11-08
    1.3K0