刷新
CSS控制表格隔行变色及高级应用
发布日期：2010-5-6 9:59:00

初级代码：

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">          
  2. <!--         
  3. tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}         
  4. -->          
  5. </style>          
  6. </HEAD>          
  7. <table>          
  8. <tr><td>第1行</td><td>第1行</td></tr>          
  9. <tr><td>第2行</td><td>第2行</td></tr>          
  10. <tr><td>第3行</td><td>第3行</td></tr>          
  11. <tr><td>第4行</td><td>第4行</td></tr>          
  12. <tr><td>第5行</td><td>第5行</td></tr>          
  13. </table>   

高级应用：

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">          
  2. <!--           
  3. tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}           
  4. td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}           
  5. -->          
  6. </style>          
  7. </HEAD>          
  8. <table>          
  9. <tr><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td></tr>          
  10. <tr><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td></tr>          
  11. <tr><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td></tr>          
  12. <tr><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td></tr>          
  13. <tr><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td></tr>          
  14. </table>