border-collapse:collapse 和有什么区别？和边框间距：0；答案

【问题标题】：What is the difference between border-collapse: collapse; and border-spacing: 0;border-collapse:collapse 和有什么区别？和边框间距：0；
【发布时间】：2016-07-02 07:40:59
【问题描述】：

是

border-collapse:collapse;

和

border-spacing: 0px;   /* only active/useful with option "separate" */
border-collapse:separate;

一样吗？

【问题讨论】：

对我来说没那么简单。我经常看到 {border-spacing: 0px; border-collapse:collapse;}，这对我来说似乎是多余的。

标签： html css border-spacing

【解决方案1】：

它们是不同的！（请参阅下面的片段以确认）。

根据 MDN here 和 here

border-collapse CSS 属性决定了表格的边框是否被分离或折叠。在分离模型中，相邻单元格每个都有自己独特的边界。在折叠模型中，相邻表格单元格共享边框。

和

border-spacing CSS 属性指定了两者之间的距离相邻表格单元格的边框（仅适用于分隔边框模型）。这相当于cellspacing 中的属性展示性 HTML，但可以使用可选的第二个值来设置不同的水平和垂直间距。

border-spacing 值也用于表格，表格边框和单元格之间的距离第一/最后一列或行是相关的总和（水平或垂直）border-spacing 和相关的（顶部、右侧、底部或左）在桌子上填充。

此属性仅在border-collapse 为separate 时适用。

所以这里是一个带有几个例子的 SNIPPET

body {
  margin: 0;
  font-family: Arial;
}
table {
  width: 100%;
  margin:30px 0
}
td {
  border: 1px solid red
}
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
.no-spacing {
  border-spacing: 0
}
.spacing {
  border-spacing: 10px
}

<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collpasing (looking like has double borders)</h4>
<table class="separate no-spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<hr />

<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

【讨论】：

表格内的'双线'（但不适用于一般表格框架）带有“border-spacing: 0px;”是吗。在我看来，这真的不美观。所以我通常假设一个简单的“border-collapse:collapse;”是类似 excel 的网格和表格所需要的。谢谢。