单线表格的实现（border-collapse: collapse/separate）

beyes

一般来做，表格是双线的，如下图所示：



为什么是双线的？其实，在定义最外边的大表格 <table> 时，有了一根线；然后再定义出一个单元格时，又是一条线，于是这两天叠加起来，就成了两条线。

那么如何变成单线的表格呢（一般做表格也都是单线表格）？

使用 CSS 中的 collapse 属性即可，表格部分代码有：

1. <table border="1" width='600px' style="border-collapse: collapse;">
   
2.         <tr>
   
3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
   
4.         </tr>
   
5. 
   
6.         <tr>
   
7.                 <td>张三</td> <td>222222</td> <td colspan="2">13800138000</td>
   
8.         </tr>
   
9. 
   
10. </table>

复制代码

上面增加了 style="border-collapse: collapse;" 这一个属性( collapse ，崩塌 )，于是表格就成了单线表格，如下图所示：


如果 border-collapse 的值写成 separate ，那么这些表格框线又分开了。