<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. js打开新的链接下载文件

    var p =params.join("&"); var a = document.createElement('a'); a.href = 'report/exportp ...

  2. Asp.Net Mvc+Angular.Js自测小Demo

    参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js ...

  3. Facade外观模式 笔记

    Facede模式: 把内部系统复杂隐藏,提供一个方便统一的接口. 微波炉在界面简单操作下就可以烹饪出美味佳肴, 微波炉内部运作原理,各个组件互相交互运作,使用者并不需要关心.  而且关心的话可能没有多 ...

  4. 搭建完整邮件系统(postfix+dovecot+clamAV+Spamassassin+amavisd-new)

    ============================ 相关软件: 1. 发送邮件 --- postfix 2. 身份认证 --- sasl2 3. 接收邮件 --- dovecot 4. 防病毒邮 ...

  5. iOS 跑马灯 之 TXScrollLabelView

    前言 前段时间在开发一个广播的功能,网上也自己找了一些库,没有发现非常好用的,于是自己抽时间写了一个,在 Github 上发布一天收获六十多个 star,这里首先感谢大家在微博上的转发,使得 TXSc ...

  6. （五）unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDAxOTcxNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. leetCode 48.Rotate Image (旋转图像) 解题思路和方法

    Rotate Image You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ...

  8. 与useradd命令相关的两个默认配置文件

      Configuration Files for User Management Defaults   When working with tools as useradd, some defaul ...

  9. php 时间转换

    在数据库读出的数据,都是字符类型的,所以需要转换: 时间的转换:用date ()函数来实现时间格式; date() 函数默认时间是1970/01/01/ 00:00:00; 要想得到想要的时间就还得用 ...

  10. 使用rpm安装mysql的默认目录

    --使用rpm安装mysql的默认目录:1.数据库目录/var/lib/mysql/2.配置文件/usr/share/mysql(mysql.server命令及配置文件)3.相关命令/usr/bin( ...