css3 之表格隔行分色显示

时间：2022-09-18 13:30:42
<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 之表格隔行分色显示

css3 之表格隔行分色显示的更多相关文章

  1. 使用CSS3实现表格隔行&sol;隔列变色

    <!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. 案例&lpar;拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论&rpar;

    一.拖拽对话框 <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&quot ...

  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. ie浏览器下，get请求缓存问题

    1 使用get请求数据 1)Java代码 $.getJSON("sortShow!sortShow?time="+new Date().getTime(),function(){} ...

  2. Objective-C中的集合类

    下面详细的介绍Objective-C中的集合类以及每个集合类的用法,学过其他面向对象编程语言的小伙伴们看到OC的集合类会有种莫名的亲切感,理解起来问题不大,可以类比Java中的集合类去学习. 在Obj ...

  3. Matlab中数组元素引用——三种方法

    Matlab中数组元素引用——三种方法   1.Matlab中数组元素引用有三种方法 1 2 3 1.下标法(subscripts) 2.索引法(index) 3.布尔法(Boolean) 注意:在使 ...

  4. hdu 4739 Zhuge Liang&&num;39&semi;s Mines 随机化

    Zhuge Liang's Mines Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...

  5. POJ&lowbar;2104&lowbar;Kth&lowbar;&lpar;主席树&rpar;

    描述 http://poj.org/problem?id=2104 给出一个n个数的数列,m次询问,每次询问求区间[l,r]中第k小的数,无修改操作. K-th Number Time Limit: ...

  6. oracle安装遇到的问题

    这两天要做一个项目,教师招聘系统.要用oracle.就安装了oracle 12c,安装的过程中遇到了一些问题,最后自己解决了.我是win7系统. 第一个报错: [INS-30131]执行安装程序验证所 ...

  7. Python ---------copy

    copy---探索 1.浅copy    就相当于把变量指针指向对象 相当于给对象从新起了个小名 a=[[1,2],3,4] a=[[1,2],3,4] b=a.copy() # print(a) # ...

  8. Windows浏览器无法连接VM虚拟机Centos并打开nginx页面

    装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...

  9. poj2513--并查集&plus;欧拉路&plus;字典树

    经典好题,自己不知道哪里错了交上去是RE,可能是数组开的不好吧,字典树老碰到这种问题.. 先马上别人的代码,有空对拍看看 #include <cstdio> #include <cs ...

  10. Libp2p学习（一）

    Libp2p学习 参考资料:libp2p-specifications : https://github.com/libp2p/specs 持续更新ing 1. 介绍 Libp2p的实现目标是: 支持 ...

相关文章