<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. 逆向思维Stock Maximize

    题目出处 题目描述: 这个题的意思是: 给出一段时间内 某个股票的每天的价格 每天可以进行的操作有:买一股,卖掉所有股,不作为 问在给定的序列里怎样让价值最大 数据规模: 每组数据包含case数 T( ...

  2. js打开新的链接2

    window.open打开新的连接时可能会被浏览器拦截掉. 所以采用动态创建a标签的形式. var a = document.createElement('a');  a.href = myUrl;  ...

  3. Java容器详解

    线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.在Java中,容器的类型主要有:List.Set ...

  4. jquery and js 判断一个元素是否存在

    一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...

  5. STL 常用的一些容器总结

    数据结构 描述 实现头文件 向量(vector) 连续存储的元素 <vector> 列表(list) 由节点组成的双向链表 <list> 双队列(deque) 连续存储的指向不 ...

  6. EMV/PBOC解析(三) TLV格式解析(C#)

    1.什么是TLV格式? TLV即Tag-Length-Value,常在IC卡与POS终端设备中通过这样的一个应用通信协议进行数据交换. 金融系统中的TLV是BER-TLV编码的一个特例编码规范,而BE ...

  7. <Win32_8>由浅入深——滚动条

    滚动条在Win32程序中是非常常见的一个控件,它的功能和地位也就不言而喻了,在文本输出中算是一个难点…… 我将借用P先生的思路讲述两种不同风格滚动条,下面切入主题:(实例程序都是显示一张位图  当然, ...

  8. HttpClient封装

    package com.exmyth.net; public interface KeyLoadListener { public void onSuccess(byte[] key); // pub ...

  9. Unity3D之MeleeWeaponTrail武器轨迹插件的使用

    MeleeWeaponTrail是Unity Asset Store中的一个免费插件.主要是用于显示武器的轨迹. 首先,找到武器绑定的骨骼.并在骨骼以下加入轨迹显示的起点和终点. 接着,给该骨骼加入M ...

  10. Ubuntu 14.04 配置vsftpd实现FTP服务器 - 通过FTP连接AWS

    测试主机:亚马逊AWS EC2 系统:Ubuntu 14.04 想用AWS来做服务器玩,结果发现其不能像简单使用阿里云服务器那样用ftp连接,反正也不熟悉ftp服务器搭建,那就乘这个机会学习一下如何利 ...