What is the difference between border-collapse: collapse; and border-spacing: 0;

Question

Is

border-collapse:collapse; 

and

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

the same?

Handiness

not so simple for me. I see quite often {border-spacing: 0px; border-collapse:collapse;}, which for me seems redundant. – Handiness

Answer 1

They are Different! (See Snippet below to confirm).

---

According to MDN here and here

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

and

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This property applies only when border-collapse is separate.

---

So here is a SNIPPET with a few examples

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>

Synchronic

The 'double-lines' inside the table (but not for the general table frame) with "border-spacing: 0px;" is it. It is really not esthetic in my opinion. So I assume normally a simple "border-collapse:collapse;" is what is wanted for excel-like grids and tables. Thanks. – Handiness