bordercolorlight的CSS实现

在 IE 中可以对 table 使用 border + bordercolordark + bordercolorlight 来实现表格边框的明暗效果。但要通过对应的 css 样式定义来实现这种效果，并没有直接的相应属性可用（何况这是IE独有属性）。

对于 IE 来说，我们可以用以下方式来美化表格的边框（或许有的人已经根本摒弃了 table 元素的使用。但在我看来， table 在进行数据排列上还是具有 div / span 所无法比拟的优点）：

<table border="1" bordercolordark="#FFFFFF" bordercolorlight="#EBEAEE" cellpadding="1" cellspacing="0"> <tbody><tr bgcolor="#EEEEEE"> <td>www.</td><td>zeali.</td><td>net</td> </tr> <tr bgcolor="#DADADA"> <td>www.</td><td>zeali.</td><td>net</td> </tr></tbody></table>

但可惜，这样的写法只能在 IE 下看到效果，并且无法方便的针对单个页面来进行个性化的样式定制。所以首先我们需要把这部分代码改成 css 样式定义，以便于以后的维护修改。

据说可以使用 IE 特有的 css 样式属性来进行对应：

<mce:style type="text/css"><!-- TABLE.colorTest{ border-width:2px; table-border-color-light: rgb(235,234,238); table-border-color-dark: rgb(255,255,255); } --></mce:style><style type="text/css" mce_bogus="1"> TABLE.colorTest{ border-width:2px; table-border-color-light: rgb(235,234,238); table-border-color-dark: rgb(255,255,255); } </style> <table class="colorTest" cellpadding="1" cellspacing="0"> <tbody><tr bgcolor="#EEEEEE"> <td>www.</td><td>zeali.</td><td>net</td> </tr> <tr bgcolor="#DADADA"> <td>www.</td><td>zeali.</td><td>net</td> </tr></tbody></table>

 

但似乎 table-border-color-light 属性并没有起作用，至少在我的 IE6 下面无效，可能只是某些 IE 版本下的语法。

所以还是得想办法用标准的 css 语法来实现相同的最终页面体现：

<mce:style type="text/css"><!-- TABLE.colorTest{ border-top: 1px solid #EBEAEE; border-left: 1px solid #EBEAEE; border-right: 0px; border-bottom: 0px; } TD.colorTest{ border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #EBEAEE; border-bottom: 1px solid #EBEAEE; } --></mce:style><style type="text/css" mce_bogus="1"> TABLE.colorTest{ border-top: 1px solid #EBEAEE; border-left: 1px solid #EBEAEE; border-right: 0px; border-bottom: 0px; } TD.colorTest{ border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #EBEAEE; border-bottom: 1px solid #EBEAEE; } </style> <table class="colorTest" cellpadding="1" cellspacing="0"> <tbody> <tr bgcolor="#EEEEEE"> <td class="colorTest">www.</td> <td class="colorTest">zeali.</td> <td class="colorTest">net</td> </tr> <tr bgcolor="#DADADA"> <td class="colorTest">www.</td> <td class="colorTest">zeali.</td> <td class="colorTest">net</td> </tr> </tbody> </table>

通过这样对 table 和 td 分别定义 border 的样式就能够实现与 border + bordercolordark + bordercolorlight 相同的效果，并且能够兼容于其他浏览器 ：）通过修改colorTest 每个 border的定义就可以实现各种不同的表格边框明暗效果。唯一的缺点就是增加了 HTML 的代码量，你必须对每个 td 都定义 className 。Updated 2006-08-04 15:02 -- 感谢POPOEVER的提醒，可以根据 css 的 class 继承关系来定义table/td，就不需再为table里面的每个td强制指定className（同样可以在IE/Firefox下得到相同的显示效果）：  

<mce:style type="text/css"><!-- TABLE.colorTest{ border-top: 1px solid #EBEAEE; border-left: 1px solid #EBEAEE; border-right: 0px; border-bottom: 0px; } .colorTest TD { border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #EBEAEE; border-bottom: 1px solid #EBEAEE; } --></mce:style><style type="text/css" mce_bogus="1"> TABLE.colorTest{ border-top: 1px solid #EBEAEE; border-left: 1px solid #EBEAEE; border-right: 0px; border-bottom: 0px; } .colorTest TD { border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #EBEAEE; border-bottom: 1px solid #EBEAEE; } </style> <table class="colorTest" cellpadding="1" cellspacing="0"> <tbody> <tr bgcolor="#EEEEEE"> <td>www.</td> <td>zeali.</td> <td>net</td> </tr> <tr bgcolor="#DADADA"> <td>www.</td> <td>zeali.</td> <td>net</td> </tr> </tbody> </table>