关于border-collapse、border-style、cellspacing、cellpadding的一些看法

border-collapse表格 tableborder-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。

---

先放结论：

当不设置border-collapse时 cellspacing=”30” 外部边框和内部边框的距离cellpadding=”20” 边框和内容的距离（padding）border-style: hidden 等价于 border-style:none 不显示边框border-collapse：collapse时 相邻边被合并（外部边框和内部边框被合并）border-style: hidden 优先级最高，只要一个边框设置了hidden，那最终结果就是不显示边框border-style: none 优先级最低，只有两个重合的边框都设置了none，才会不显示边框。

---

不设置border-collapse属性时

当我们写一个普通的表格的时候：

<table width="200" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

样式为：

在这里介绍两个属性： cellspacing 和 cellpadding cellspacing : 外部边框和内部边框的距离 cellpadding : 边框和内容的距离

cellspacing="10" cellpadding="20"时：

再介绍一个属性： border-style: hidden 等价于 border-style:none 即 不显示边框

代码实验： 给左上和右下的边框分别用hidden和none设置了不显示边框，可以看到他们的效果是一样的

<table width="200" border="1" cellspacing="10" cellpadding="20"> <!-- style="border-collapse:collapse" --> <tr> <td style="border-style: hidden"> </td> <td> </td> </tr> <tr> <td> </td> <td style="border-style: none"> </td> </tr> </table>

此时的样式：

border-collapse:collapse 时

此时的代码是这样的：

<table width="200" border="1" cellspacing="10" cellpadding="20" style="border-collapse:collapse"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

此时的样式：

此时 cellspacing="10"的属性已经不起作用了 （cellpadding="20"还是起作用的）

我们现在再来对左上和右下的边框分别设置hidden和none：

<table width="200" border="1" cellspacing="10" cellpadding="20" style="border-collapse:collapse"> <tr> <td style="border-style: hidden"> </td> <td> </td> </tr> <tr> <td> </td> <td style="border-style: none"> </td> </tr> </table>

再看此时的样式： 我们可以发现： 从效果上来开，只有border-style: hidden 起作用了 而如果我们在上面代码的基础上，同时对右下的框的上面的那条边也设置border-style: none后 这条公共的边终于没有了。

小结论： border-style: hidden ，只要一个边框设置了hidden，那最终结果就是不显示边框 border-style: none ，只有两个重合的边框都设置了none，才会不显示边框。