使用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日
下一篇 2020年11月24日

相关推荐

  • 6大主流自媒体平台运营方式

    在新媒体的风口上,许多企业将自己的内容做全渠道的覆盖推广,得到的效果却并不好,因为企业并没有仔细研究每个自媒体平台的机制,只是机械式的发文。只有将自媒体平台的各个方面研究透,再去做运营推广,才能得到你想要的效果。毕竟知己知彼,方能百战百胜。不过今天入门屋为你总结了6大自媒体平台的运营方法,让你玩转新媒体平台! 一、 今日头条 优点:头条号的申请难度不大,唯一…

    建站入门 2018年8月1日
    10800
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

    升级WordPress 5.0后,切换回经典编辑器Classic Editor WordPress 5.0 正式采用了全新的区块编辑器-古德堡编辑器Block Editor Gutenberg,对于很多已经习惯国产编辑器习惯的站长来说不是特别方便,下面我们看看如何切换成经典编辑器吧。   相信有不少人不太习惯新编辑器的使用,那么在更新了WordPress 5…

    建站入门 2018年12月15日
    9600
  • 博客引流技巧

    很多人觉得博客已经过气,在博客上引流可能没什么戏。但是有时候,越不被看好的爆发力越强。新浪博客想必大家都知道,它不仅仅在百度上的排名很靠前,而且是和三大社交软件之一—新浪微博是相关联的,这样就可以引来很多流量了。今天入门屋就跟大家介绍下新浪博客的引流方法。 一、长尾关键词。大家可能常常看到过这个名词,但是对这个词的具体还不算太清楚。我们在百度上搜索下这个词。…

    2018年10月2日
    9800
  • 11个SEO最常见问题解答

    SEO 初学者最经常会提到这些问题: 1、帮我看看我的站点 XXX.XXX.com SEO 得怎么样? 简单的 SEO 评估,我们主要从这几个方面: 网站导航和链接是否采用 Html 方式实现。 是否实现 URL 静态化。 关键词优化是否到位,包括标题的书写、关键词的设置、关键词密度控制等。 网站结构是否合理,是否有简单的 SEO技巧。 2、搜索引擎一般多长…

    建站入门 2018年2月21日
    7900
  • 百度搜索优质内容指南

    1、导言 一直以来,百度搜索从用户角度出发,不断分析和研究用户需求,努力提升搜索结果的优质体验,期望将最优质的搜索结果返回给搜索用户。 什么样的内容才算优质?什么样的内容才能更好的满足用户的需求?相信优质内容的生产者也想知道。 我们发布了《百度搜索优质内容指南》为广大内容生产者提供参考,希望您的优质内容获得更多搜索用户的青睐。 2、面向对象 《百度搜索优质内…

    2020年4月3日
    7500

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信