使用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日

相关推荐

  • 百度APP移动搜索落地页体验白皮书5.0

    1.导言 2.面向对象 3.名词解释 4.落地页体验规范   4.1. 信息获取规范 4.1.1 加载速度   4.2.页面浏览规范 4.2.1 排版布局   4.2.2 字号间距   4.2.3 pc站移动适配   4.2.4 页面机型适配   4.2.5 落地页广告标准   4.3. 交互操作规范   4.3.1 滑动顺畅   4.3.2 功能友好   …

    建站入门 2020年3月25日
    14100
  • 大前端和小前端的区别

    1、小前端指的是Web前端,从浏览器端到web服务器端的所有开发; 2、而大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。 大前端是web统一的时代,利用…

    建站入门 2022年2月7日
    29500
  • 提高网站页面收录速度技巧

    很多人经常问入门屋小编,我的网站怎么没有收录?文章怎么快速被收录?下面入门屋小编来解析这个问题: 站点页面被搜索引擎收录是各位站长上线网站后首要问题,其实站点页面收录的快慢就是网站权重的体现,网站文章收录速度,也反映了搜索引擎快照的更新速度。要想提高文章被搜索引擎收录的几率,要么让搜索引擎蜘蛛频繁光顾你的网站抓取信息,要么把你网站上的内容充实起来,每天更新大…

    建站入门 2018年8月16日
    16900
  • 百度为什么不收录我的站点?

    搜索引擎为什么不收录我的站点? 搜索引擎进行网站索引和排名过程是完全程序自动化的,所以: 1、搜索引擎不会因为一些细小的网站错误而直接删除你的站点,如:某个页面出现乱码。 2、搜索引擎不会因为主观问题而删除你的站点,如:网页上出现对百度不友好的言词。 3、你的情况绝不是特例,其他的网站也会出现你这个情况。 4、只要符合搜索引擎的索引条件,一般情况下是会被收录…

    建站入门 2018年3月2日
    19200
  • 关键词密度多少比较好?

    很多SEO前辈都回答过这个问题。答案分别是:2-8%、3-7%、低于10%、5%左右,你自己选一个吧。关键词密度是一个模糊的概念而不是绝对。 关键词密度并不是越高越好,下面的解释,你或许会明白关键词密度意味着什么? 搜索引擎的工作流程大概是这样的: 1、对网页进行索引。这是Robot的工作,搜索机器人很勤奋,所以被收录是最简单的事情了。(但却有不少人老是在埋…

    建站入门 2018年4月12日
    26400

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信