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

相关推荐

  • 熊掌号SEO指南2.0

    进入移动互联网时代,百度搜索致力于提升搜索用户的浏览体验,营造健康的搜索生态。过去一年中,在百度搜索和全网资源提供者的共同努力下,移动搜索落地页广告问题已经得到了明显的改善。现在,百度搜索发布《百度移动搜索落地页体验白皮书4.0》,旨在继续与各内容生产者、服务提供者携手同心,全方位提升移动搜索落地页体验,给亿万用户以最优质的资源与服务,给网站以最持久鲜活的生…

    2018年11月1日
    1.6K00
  • Typecho使用指南 – 主题&插件

    前言 自从买VPS,就一直研究还可以做些什么?于是,我想到自己搭建个博客,上网看看了,感觉Typecho,挺不错的。故写下此篇博客。 准备 Typecho 安装 下载Typecho压缩包,上传服务器wwwroot下,把所有文件解压出来。 进入数据库中,创建一个typecho的数据库。 在浏览器中访问您的域名将自动跳转到安装地址(记得要绑定域名),点击“我准备…

    建站入门 2018年11月12日
    19700
  • 百度智能小程序SEO指南

    第一章、智能小程序建设如何对搜索友好 一、页面结构要求 1、页面结构清晰、各模块划分清晰。 2、分类划分明确,设置醒目,分类主题的文章对应发布到相应分类下。 3、Web化url结构清晰,易提炼成正则规则,如果有对应H5网站,建议形成对应关系。 4、页面导航设置合理,机器可读、位置突出,用户能很好得知所访问页面在小程序中的位置。 二、链接 链接在移动端依然起着…

    2019年5月6日
    6000
  • 几大搜索引擎的网站登录入口

    以下是登录几个重要搜索引擎的网站登录入口地址: 百度:http://zhanzhang.baidu.com/linksubmit/url 搜狗:http://fankui.help.sogou.com/ 360:http://info.so.360.cn/site_submit.html UC神马搜索:http://zhanzhang.sm.cn/open/…

    建站入门 2018年1月20日
    5000
  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

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

    产品运营 2018年4月15日
    14100

发表回复

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

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信