首先我们来了解一下css border-collapse属性是什么？它的作用。
border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。
基本语法：border-collapse : separate | collapse
separate：默认值，边框会被分开，即显示双线边框。
collapse：如果可能，边框会合并显示为一条线，即单线边框。
由此我们也可以看出border-collapse 属性可以设置两种表格边框线样式，分别为：双线边框和单线边框。
下面我们通过简单的代码示例来看看表格两种边框线样式的实现方法
双线表格边框的实现
html代码：
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
css代码：table,table td{
text-align: center
border: 1px solid #000
border-collapse：separate；
}
table td{
padding: 10px 30px
}
效果图：
表格边框的双线样式其实很简单，只要同时设置表格外边框和table里的每个单元格的边框，就可以实现了。因为separate是默认值，就算是不设置border-collapse：separate；表格也会呈现双线效果。我们主要是来看看border-collapse属性合并边框，实现单线边框的方法，html代码一样，只需设置css样式：
css代码：table,table tr td {
border: 1px solid #000
text-align: center
border-collapse: collapse
}
table tr td {
padding: 10px 30px
}
/* css部分 */table{ border-collapse:collapse }
table table{ border-style:hidden } <!-- HTML部分 -->
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200"> </td>
<td width="200"> </td>
</tr>
<tr>
<td> </td>
<td>
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
