<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. Selenium webdriver 查找元素

    1.简单查找 By ID: WebElement element=driver.findElement(By.id("userId")); By Name:WebElement e ...

  2. 【ICIP2013】MULTI-SOURCE IMAGE AUTO-ANNOTATION

    题目:多来源图像自动标注 文中利用了不同来源的图像组内和组间的关系来增强自动标注的效果. 一方面认为,相似的图像预测的也应该是相似的,利用kNN图的关系进行组内的正则化,以此增强底层特征的联系. 另一 ...

  3. Android Studio中自己定义快捷输入块

    快捷键:Ctrl + Alt + s,进入Settings >Editor>Live Templates>output中加入一个项,选择第一个Live Template waterm ...

  4. valgrind 的使用及错误信息分析

          这里记录一下使用valgrind查找你的应用程序中的各种潜在的错误信息,并举例说明. 经常使用valgrind查找一下你的代码的内存有关错误,对移植到嵌入系统后的系统稳定性来说有着重要的意 ...

  5. [转] linux 信号量之SIGNAL

    我们可以使用kill -l查看所有的信号量解释,但是没有看到SIGNAL 0的解释. [root@testdb~]# kill -l 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) ...

  6. [转] gdb中忽略信号处理

    信号(Signals) 信号是一种软中断,是一种处理异步事件的方法.一般来说,操作系统都支持许多信号.尤其是UNIX,比较重要应用程序一般都会处理信号.UNIX定义了许 多信号,比如SIGINT表示中 ...

  7. wildcard

    [rusky@rhel7 test]$ lstest1  test123  test2  test317  test33  test335  test336  test44  testtest[rus ...

  8. Android中ListView的优化

    第一种方法 重用了convertView,很大程度上的减少了内存的消耗.通过判断convertView是否为null,是的话就需要产生一个视图出来,然后给这个视图数据,最后将这个视图返回给底层,呈献给 ...

  9. 03-StreamReader和StreamWriter的案例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  10. (转)安装 Apache 出现 <OS 10013> 以一种访问权限不允许的方式做了一个访问套接字的尝试

    在安装Apache的过程中出现: 仔细查看提示: make_sock: could not bind to address 0.0.0.0:80 恍然大悟,计算机上安装了IIS7,80端口已占用. 打 ...