使用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日 下午11:36
下一篇 2020年11月24日 上午1:24

相关推荐

  • 抖音首次公开推荐算法原理

    3 月 30 日消息,抖音总裁韩尚佑今日宣布,“抖音安全与信任中心”网站上线。网站首次公开抖音推荐算法原理,介绍其推荐算法如何预估用户行为概率,并通过多目标建模等方式实现更优质、丰富的内容推荐,而算法需由平台治理体系对其进行约束和规范。 据IT之家了解,网站也披露了抖音平台治理的审核流程,阐述平台如何应对谣言、网暴等违规内容带来的挑战。 同时,抖音还介绍了自…

    建站入门 2025年3月30日
    67200
  • SEO文章怎么写?SEO文章写作逻辑

    本文大纲: 01 SEO文章的写作思路 02 SEO文章的写作举例 03 SEO文章撰写技巧 01 SEO文章的写作思路 1、选题(选关键词) 自媒体运营写文章的时候,会有选题这个环节,选题的目的在于能够最大程度激发用户的需求点。对于SEO文章来说,其实也是一样的,在SEO里选题其实就是选关键词,选目标词。如果选择了一个搜索量很小的关键词,这样从开始的时候就…

    建站入门 2022年2月7日
    1.1K00
  • 百度移动搜索落地页体验白皮书——广告篇3.0

    1.  百度坚决捍卫移动搜索用户体验 2.  名词解释 2.1.广告 2.2.APP引导 2.3.主体内容 2.4.首屏 2.5.一屏 3.  落地页广告规范 3.1.禁止的广告样式 3.2.广告位置以及面积 3.3.广告内容 3.4.注意规范 1. 百度坚决捍卫移动搜索用户体验 2017年初,百度用户体验部针对用户进行了满意度调研,发现很多恶意低质的广告严…

    建站入门 2018年3月10日
    1.2K00
  • 百度为什么不收录我的站点?

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

    建站入门 2018年3月2日
    1.2K00
  • Cursor软件设置中文版教程

    在日常使用Cursor软件时,很多用户可能希望将其界面语言设置为中文,以便更好地理解和操作。本文将为大家介绍两种设置Cursor软件中文版的方法,包括使用拓展程序和配置语言设置。 一、使用拓展程序设置中文版 二、配置语言设置中文版 注意事项 通过以上两种方法,您可以轻松地将Cursor软件设置为中文版,享受更加便捷的本地化操作体验。无论是使用拓展程序还是配置…

    建站入门 2025年3月28日
    99100

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信