读书人

CSS顶替bordercolorlight与bordercolo

发布时间: 2012-07-27 11:03:00 作者: rapoo

CSS代替bordercolorlight与bordercolordark
我们可以使用bordercolorlight与bordercolordark 来设置Table的边框,使之变得漂亮;

1、 bordercolorlight与bordercolordark的用法(这种用法只限于IE)

<table cellspacing="0" bordercolordark='#D3D8E0' bordercolorlight='#4F7FC9' cellpadding="5" border="1" width="80%">

??????? <tr>

??????????? <td style="background-color:#e3efff;">

??????????????? 第一行e3efff

??????????? </td>

??????? </tr>

??????? <tr>

??????????? <td style="background-color:#f5f9ff;">

??????????????? 第二行f5f9ff

??????????? </td>

??????? </tr>

??? </table>

2、 通过css设置边框属性达到同样的效果

<style type="text/css">

??? TABLE.colorTest{??

??????? border-top: 1px solid #4F7FC9;???

??????? border-left: 1px solid #4F7FC9;???

??????? border-right: 0px;???

??????? border-bottom: 0px;???

??? }??

??? .colorTest TD{

??????? border-top: 1px solid #D3D8E0;???

??????? border-left: 1px solid #D3D8E0;???

??????? border-right: 1px solid #4F7FC9;???

??????? border-bottom: 1px solid #4F7FC9;??

??? }??

</style>

Table可以使用上面定义的样式达到同样的效果,而且是多浏览器中;

<table class="colorTest" cellpadding="1" cellspacing="0" border="1px" width="80%" border="1">

??? <tbody>

??????? <tr bgcolor="#e3efff">

??????????? <td>

??????????????? 第一行

??????????? </td>

??????? </tr>

??????? <tr bgcolor="#f5f9ff">??

??????????? <td>

???????????? ???第二行

??????????? </td>

??????? </tr>

??? </tbody>

</table>

读书人网 >CSS

热点推荐