你的位置:首页 > 网页设计

[网页设计]使用CSS实现表格细边框的三种方式


说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。

由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一下常用的三种实现细边框表格的方式,分享给大家,代码如下:

<!DOCTYPE html><html  /*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/    .demo1 {      background-color: #ccc;    }      .demo1 th,.demo1 td {        background-color: #fff;      }     /* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/    .demo2 {      background-color: #ccc;      border-spacing: 1px;    }      .demo2 th, .demo2 td {        background-color: #fff;              }     /* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */    .demo3 {      border: 1px solid #ccc;      border-collapse: collapse;    }      .demo3 th, .demo3 td{        border: 1px solid #ccc;      }  </style></head><body>  <p>Demo1</p>  <table border="0" cellpadding="0" cellspacing="1">    <thead>      <tr>        <th>Title1</th>        <th>Title2</th>        <th>Title3</th>      </tr>    </thead>    <tbody>      <tr>        <td>Row1-01</td>        <td>Row1-02</td>        <td>Row1-03</td>      </tr>      <tr>        <td>Row2-01</td>        <td>Row2-02</td>        <td>Row2-03</td>      </tr>    </tbody>  </table>  <p>Demo2</p>  <table >    <thead>      <tr>        <th>Title1</th>        <th>Title2</th>        <th>Title3</th>      </tr>    </thead>    <tbody>      <tr>        <td>Row1-01</td>        <td>Row1-02</td>        <td>Row1-03</td>      </tr>      <tr>        <td>Row2-01</td>        <td>Row2-02</td>        <td>Row2-03</td>      </tr>    </tbody>  </table>  <p>Demo3</p>  <table >    <thead>      <tr>        <th>Title1</th>        <th>Title2</th>        <th>Title3</th>      </tr>    </thead>    <tbody>      <tr>        <td>Row1-01</td>        <td>Row1-02</td>        <td>Row1-03</td>      </tr>      <tr>        <td>Row2-01</td>        <td>Row2-02</td>        <td>Row2-03</td>      </tr>    </tbody>  </table></body></html>
效果图: