• 超强 css 实现 table 隔行 ,隔列 换色


    隔行换色示例: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>放弃class与js实现隔行换色效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="PengRong" />

    <style type="text/css">
    <!--
    /* PR-CSS */
    table
    {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
    table td
    {border:solid #999;border-width:0 1px 1px 0;}

    tr
    {background:#eee;}
    tr + tr
    {background:#ccc;}
    tr + tr + tr
    {background:#eee;}
    tr + tr + tr + tr
    {background:#ccc;}
    tr + tr + tr + tr + tr
    {background:#eee;}
    -->
    </style>
    </head>

    <body>
    <table>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    </table>
    </body>
    </html>




    隔列换色示例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>放弃class与js实现隔列换色效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="PengRong" />

    <style type="text/css">
    <!--
    /* PR-CSS */
    table
    {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
    table td
    {border:solid #999;border-width:0 1px 1px 0;}

    td
    {background:#eee;}
    td + td
    {background:#ccc;}
    td + td + td
    {background:#eee;}
    td + td + td + td
    {background:#ccc;}
    td + td + td + td + td
    {background:#eee;}
    -->
    </style>
    </head>

    <body>
    <table>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    <tr>
    <td>12</td><td>12</td><td>12</td><td>12</td>
    </tr>
    </table>
    </body>
    </html>

    详细出处参考:http://www.jb51.net/article/10160.htm
  • 相关阅读:
    Linux中应用程序如何使用系统调用syscall
    Spring Service、Dao进行Junit单元测试
    spring service层单元测试
    java-随机生成用户名(中文版及英文版)
    Java获取随机数
    JUnit单元测试框架的使用
    Mock以及Mockito的使用
    Spring Boot 各Starter介绍
    编写自己的SpringBoot-starter
    Spring Boot使用单元测试
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/2325265.html
Copyright © 2020-2023  润新知