曲径通幽论坛

标题: 单线表格的实现（border-collapse: collapse/separate） [打印本页]

作者: beyes 时间: 2015-12-17 23:46
标题: 单线表格的实现（border-collapse: collapse/separate）
一般来做，表格是双线的，如下图所示：
[attach]4234[/attach]

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

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

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

<table border="1" width='600px' style="border-collapse: collapse;">
<tr>
<td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
</tr>
<tr>
<td>张三</td> <td>222222</td> <td colspan="2">13800138000</td>
</tr>
</table>

复制代码

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

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

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)