<html>

    <head>

    <title></title>

    <style type="text/css">

       table{

        width: 100%;

        font-size: 14px;

        table-layout: fixed;

        empty-cells: show;

        border-collapse: collapse;

        margin: 0 auto; /*让table居中显示*/

        border: 1px solid #cad9ea;

        color: #666666;

       }

       th{

        height: 30px;

        background-color: #cad9ea;

       }

       td{

        height: 20px;

       }

       td,th{

        border: 1px solid #cad9ea;

        padding: 0 1em 0;

       }

       tr:nth-child(even){

        /*通过结构伪类选择器为表格内的偶数行定义背景色，以实现隔行分色显示效果*/

        background-color: #f5fafe;

       }

    </style>

    </head>

    <body>

    <table>

        <tr>

        <th>排名</th>

        <th>校名</th>

        <th>学校类型</th>

        </tr>

        <tr>

        <td>1</td>

        <td>清华大学</td>

        <td>理工</td>

        </tr>

        <tr>

        <td>1</td>

        <td>清华大学</td>

        <td>理工</td>

        </tr>

        <tr>

        <td>2</td>

        <td>清华大学</td>

        <td>理工</td>

        </tr>

        <tr>

        <td>3</td>

        <td>清华大学</td>

        <td>理工</td>

        </tr>

    </table>

    </body>

</html>

效果图：

css3 之表格隔行分色显示的更多相关文章

  1. 使用CSS3实现表格隔行/隔列变色

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  2. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  3. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  5. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  6. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  7. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  8. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  9. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. 把struts2-convention-plugin丢进太平洋

    struts2-convention-plugin是一个插件,通过这个插件可以实现对于struts2的零配置,基本用法可以参考这个博客(http://javeye.iteye.com/blog/358 ...

  2. J - Borg Maze - poj 3026（BFS+prim）

    在一个迷宫里面需要把一些字母.也就是 ‘A’ 和 ‘B’连接起来,求出来最短的连接方式需要多长,也就是最小生成树,地图需要预处理一下,用BFS先求出来两点间的最短距离, *************** ...

  3. Java并发编程：sleep、wait、yield对比

    首先,wait()和notify(),notifyAll()是Object类的方法,sleep()和yield()是Thread类的方法. (1).常用的wait方法有wait()和wait(long ...

  4. SCGHR 分析思路

    -- 分析某个模块业务 a:添加表,登记表,历史表,信息表 --- (把表名搞清楚,再看具体的字段) 先搞清楚大概的数据流向,在着手具体的数据,大处布局,小处着手 b:表中的字段,以及各表直接传递什么 ...

  5. fsck 修复ext3文件系统(用于linux系统时间不对，文件系统信息有错引起的die with exit status等的一些问题)

    有时候我们用虚拟机装了linux,可是我们做开发的人员,系统时间可能出于一些特殊要求调整过(例如保持一些特殊软件不过期,需要锁定时间等等),这样linux的系统时间久不准了,如果时间不准,会造成ext ...

  6. 跟Google学习Android开发-起始篇-构建你的第一个应用程序（4）

    说明:此系列教程翻译自Google Android开发者官网的Training教程,利用Chome浏览器的自动翻译功能作初译,然后在一些语句不顺或容易造成误解的地方作局部修正.方便英文不好的开发者查看 ...

  7. 如果ASM磁盘组由哪些物理磁盘组成？

    我们知道用下面的方法可创建 ASM 磁盘,然后再创建逻辑的ASM组 以 root 用户身份创建 ASM 磁盘.# /etc/init.d/oracleasm createdisk VOL1 /dev/ ...

  8. NSRunLoop（来自官方文档）

    The NSRunLoop class declares the programmatic interface to objects that manage input sources. An NSR ...

  9. MultiWii MWC的软件和调试方法

    (如果你的电脑是win7 64位的系统,安装了JAVA虚拟机后GUI仍然运行不了,那你就需要到C:\Program Files\Java\jre7\bin\找到并复制javaw.exe,然后粘贴到C: ...

  10. eclipse lint工具介绍

    一.基本介绍 作为移动应用开发者,我们总希望发布的apk文件越小越好,不希望资源文件目录中没有用到的图片等资源也被打包进apk,不希望应用中使用了高于minSdk的api,也不希望AndroidMan ...