Question

时

border-collapse:collapse;

和

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

同样的？

Answer 1

他们不同！（请参阅下面的代码段确认）。

<小时/> 根据MDN here和here

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

和

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

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

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

<小时/> 所以这里有一个 SNIPPET ，其中包含一些例子

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

边界崩溃有什么区别：崩溃;和边界间距：0;

1 个答案: