<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. Spark Streaming 入门指南

    这篇博客帮你开始使用Apache Spark Streaming和HBase.Spark Streaming是核心Spark API的一个扩展,它能够处理连续数据流. Spark Streaming是 ...

  2. Hdu 1856（离散化+并查集）More is better

    题意:一些人遵循朋友的朋友也是朋友原则,现在找出最大的朋友圈, 因为人的编号比较大,但是输入的数据最多是10w行,所以可得出最多也就20w人,所以可以进行一下离散化处理,这样数据就会毫无压力 //// ...

  3. requirejs2读书笔记

    If you want to do require() calls in the HTML page, then it is best to not use data-main. data-main ...

  4. 程序中使用7-zip（7z）压缩文件

    Email:longsu2010 at yeah dot net 工作中难免遇到需要压缩文件的情况,比如有一千万个小文件,每个文件约100k,如果使用7-zip压缩后可能十几k,可以节省很多磁盘空间. ...

  5. Spark HA 的搭建

    接hadoop HA的搭建,因为你zookeeper已经部署完成,所以直接安装spark就可以 tar –xzf spark-1.6.1-bin-hadoop2.6.tgz -C ../service ...

  6. Linux GRUB 2及修改默认启动项

    The GRUB 2 boot loader makes sure that you can boot Linux. GRUB 2 is installed in the boot sector of ...

  7. 安装VS2013的离线MSDN帮助文档

    作为vs的初学者,安装帮助文档有利于快速掌握.net的基本语法,对于摸索学习的同学帮助很大. VS2013和VS2012的帮助文档目前为止还是一样 下面是下载地址    http://www.micr ...

  8. Config配置文件读写

    config文件读写操作(文字说明附加在程序中) App.config文件 <?xml version="1.0" encoding="utf-8" ?& ...

  9. java的@see注释

    @see注释用法 @see 类名 @see #方法名或属性名 @see 类名#方法名或属性名

  10. 关于oracle dblink的知识。

    create database link WZGLconnect to MMCSG_GX(用户名)using '(description=(address_list=(address=(host=xx ...