根据MDN here和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.

和

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.

所以这里是一个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
}