CSS代替bordercolorlight与bordercolordark

CSS代替bordercolorlight与bordercolordark

2009年08月25日 星期二 15:41

我们可以使用 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 >