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

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

---

先放结论：

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

---

不设置border-collapse属性时

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

  <table width="200" border="1">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</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">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td style="border-style: none">&nbsp;</td>
        </tr>
    </table>

此时的样式：

border-collapse:collapse 时

此时的代码是这样的：

    <table width="200" border="1" cellspacing="10" cellpadding="20" style="border-collapse:collapse">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</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">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td style="border-style: none">&nbsp;</td>
        </tr>
    </table>

再看此时的样式：

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

这条公共的边终于没有了。

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