<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. HDU 4391 - Paint The Wall - 分块哈希入门

    题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=4391 题意 : 给一段区间, 有两种操作 1 : 给 x 到 y 的区间染色为 z 2 : 查询 ...

  2. Cgroup - Linux 内存资源管理

    Hi ,我是 Zorro .这是我的微博地址,我会不定期在这里更新文章,如果你有兴趣,可以来关注我呦. 另外,我的其他联系方式: Email: mini.jerry@gmail.com QQ: 300 ...

  3. Java程序员可能犯的3个常见SQL错误

    概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...

  4. Java内部类实现伪方法级多线程

    最近碰到一个问题,就是用户在填写相关信息提交后,后台需要将一些文件同步到另外一台服务器,而这个时候,由于用的是spring的框架,导致前端页面需要等待文件同步完成,才能弹出提示信息.相信大家在很多时候 ...

  5. 经典算法:快排的Javascript版本

    function swap(arr,l,r){ var temp=arr[l]; arr[l]=arr[r]; arr[r]=temp; } function partition(arr,camp,l ...

  6. [AngularJS] Services, Factories, and Providers -- value & Providers

    Creating a Value Object Sometimes you have javascript object defined: //value object var droidValue ...

  7. Java基础知识强化93：算一下你来到这个世界多少天的案例

    1. 分析: (1)键盘录入你的出生年月日 (2)把该字符串转换为一个日期 (3)通过该日期得到一个毫秒值 (4)获取当前时间的毫秒值 (5)用(4)-(3)得到一个毫秒值 (6)把E的毫秒值转换为天 ...

  8. Environment Configuration Files

    Environment Configuration Files When a user logs in, an environment is created for that user automat ...

  9. 使用socket实现聊天功能

    public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSocket=null ...

  10. Java学习之路（一）了解Java

    Java“白皮书”的关键术语 1)简单性 相对于C++:没有头文件.指针运算.结构.联合.操作符重载.虚基类. 另一方面是小:java微型版(Java Micro Edition)用于嵌入式设备 2) ...