【问题标题】: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 herehere

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

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

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

此属性border-collapseseparate 时适用。


所以这里是一个带有几个例子的 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 的网格和表格所需要的。谢谢。
猜你喜欢
  • 2012-01-08
  • 1970-01-01
  • 2011-02-18
  • 1970-01-01
  • 2016-02-20
  • 1970-01-01
  • 2016-03-23
相关资源
最近更新 更多