8

是

border-collapse:collapse;

和

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

相同？

4

1 回答 1

11

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

根据 MDN这里和这里

border-collapseCSS 属性确定表格的边框是分开还是折叠。在分离模型中，相邻的单元格每个都有自己不同的边界。在折叠模型中，相邻的表格单元格共享边框。

和

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

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

此属性仅在border-collapseis时适用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>

于 2016-03-16T12:59:46.007 回答