<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. CapsLock indicator on Ubuntu for Thinkpad

    http://askubuntu.com/questions/292535/how-to-get-caps-num-scroll-lock-keys-osd-notification sudo add ...

  2. FLEX 图片拷贝

    在用FLEX做GIS相关的开发的时候,遇到一个问题.因为是监控类的系统,所以需要要求地图上的ICON的实时更新,从而会出现重复加载的情况.就是重复请求相同的图片用做背景,尤其是在加载的ICON较多的时 ...

  3. SVN在Android Studio中的配置

    在AndroidStudio中开发版本控制,除了Git就是SVN,和Eclipse不同Android Studio没有提供单独的插件,只能和SVN客户端关联使用,和Eclipse安装有很大区别,下面介 ...

  4. C primer plus 读书笔记第九章

    本章的标题是函数.C的设计原则是把函数作为程序的构成模块. 1.函数概述 函数的定义:函数是用于完成特定任务的程序代码的自包含单元. 使用函数的原因:1.函数的使用可以省去重复代码的编写.2.使得程序 ...

  5. Lucene自定义扩展QueryParser

    Lucene版本:4.10.2 在使用lucene的时候,不可避免的需要扩展lucene的相关功能来实现业务的需要,比如搜索时,需要在满足一个特定范围内的document进行搜索,如年龄在20和30岁 ...

  6. [RxJS] Returning subscriptions from the subscribe function

    So far, when writing these subscribe functions, we haven't returned anything. It is possible return ...

  7. [Redux] Avoiding Object Mutations with Object.assign() and ...spread

    Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects. ...

  8. C文件读写函数介绍（转）

    1.fopen() fopen的原型是:FILE *fopen(const char *filename,const char *mode),fopen实现三个功能:为使用而打开一个流,把一个文件和此 ...

  9. linux删除或隐藏命令历史记录history

    1.环境变量添加HISTCONTROL = ignorespace 在命令前面插入空格,这条命令会被 shell 忽略,也就意味着它不会出现在历史记录中.但是这种方法有个前提,只有在你的环境变量 HI ...

  10. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...