zoukankan      html  css  js  c++  java

  • 超强 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
  • 相关阅读:
    c# 反射应用之工厂
    UnityContainer 实现DI
    TinyMCE 的音乐插件/mp3 music insert plugin
    Django on IronPython and Windows
    说说分页
    Katze 简单的.net "ORM"框架
    Discuz!NT在64位Windows下运行的问题
    恐怖的迅雷
    基于Gettext的asp.net网站多语言解决方案
    微软是如何输掉API之战（下）
  • 原文地址：https://www.cnblogs.com/suizhikuo/p/2325265.html
Copyright © 2011-2022 走看看