« IE6又一bug？
Ubuntu 8.04 LTS »

一个完整的表格样式

2008-04-24 10:51 | Filed Under Html/JS/CSS |

一坨针对IE的HACK

  1. table.default {
  2.     background: #C1DCF7 none repeat scroll 0%;
  3.     border: 1px solid #C1DCF7;
  4.     color: #000000;
  5.     width: 98%;
  6.     border-collapse: collapse;
  7.     margin: 0 auto;
  8. }
  9.  
  10. table.default caption {
  11.     background:transparent url(http://blog.sunshow.net/wp-content/uploads/2008/04/bg_list.gif) repeat-x scroll 0%;
  12.     height: 30px !important;
  13.     line-height: 30px;
  14.     text-align: left;
  15.     padding-left: 10px;
  16.     font-size: 14px;
  17.     font-weight: bold;
  18.     color: #FFFFFF;
  19. }
  20.  
  21. table.default caption a:link, table.default caption a:visited {
  22.     color: #000000;
  23.     font-size: 12px;
  24.     text-decoration: underline;
  25. }
  26.  
  27. table.default caption a:hover {
  28.     font-size: 12px;
  29.     color: #14568A;
  30. }
  31.  
  32. table.default thead tr {
  33.     background: #C1DCF7 none repeat scroll 0%;
  34.     color: #000000;
  35.     height: 25px;
  36.     line-height: 25px;
  37.     text-align: center;
  38.     font-size: 13px;   
  39. }
  40.  
  41. table.default thead tr th {
  42.     border-color: #C1DCF7;        /* fix for IE */
  43. }
  44.  
  45. table.default tbody {
  46.     background: #FFFFFF none repeat scroll 0%;
  47.     text-align: left;
  48. }
  49.  
  50. table.default tbody tr {
  51.     height: 25px;
  52.     line-height: 25px;
  53.     event: expression(
  54.         (this.onmouseover = function() {this.className += ' over';}) &&
  55.         (this.onmouseout = function() {this.className = this.className.replace(' over', '');})
  56.     );
  57. }
  58.  
  59. table.default tbody tr:hover, table.default tbody tr.over {
  60.     background-color: #E8F0FF;
  61. }
  62.  
  63. table.default tbody tr td {
  64.     font-size: 12px;
  65.     padding: 0 0 0 5px;
  66.     border-color: #C1DCF7;        /* fix for IE */
  67. }
  68.  
  69. table.default tbody tr td {    /* fix for IE when align="center" or align="right" */
  70.     padding-left: expression(
  71.         (((this.align == 'center') || (this.align == 'right')) ? '0px' : '5px')
  72.     );
  73.     padding-right: expression(
  74.         ((this.align == 'right') ? '5px' : '0px')
  75.     );
  76. }
  77.  
  78. table.default tbody tr td[align="center"] {
  79.     padding: 0;
  80. }
  81.  
  82. table.default tbody tr td[align="right"] {
  83.     padding: 0 5px 0 0;
  84. }

效果展示：

提示：您可以先修改部分代码再运行

标签：, ,

相关日志 随机文章

Permalink | Trackback | Comments RSS | Print This Page |

Comments

One Response to “一个完整的表格样式”

  1. feuvan on 2008-04-24 4:10 pm

    IE really sucks

    [Reply]

Leave a Reply




请输入验证码

Use "<coolcode></coolcode>" to publish your code.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.

京ICP备05059555号