说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。
由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：
<title>细边框表格的实现方式</title> <style> /*可以应用于所有浏览器,但是需要设置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> <p>Demo1</p> | Title1 | Title2 | Title3 |
|---|---|---|
| Row1-01 | Row1-02 | Row1-03 |
| Row2-01 | Row2-02 | Row2-03 |
Demo2
| Title1 | Title2 | Title3 |
|---|---|---|
| Row1-01 | Row1-02 | Row1-03 |
| Row2-01 | Row2-02 | Row2-03 |
Demo3
| Title1 | Title2 | Title3 |
|---|---|---|
| Row1-01 | Row1-02 | Row1-03 |
| Row2-01 | Row2-02 | Row2-03 |
<strong>效果图：</strong>
