CSS border-collapse Property

table, td, th {
  border: 1px solid black;
}

#example1 {
  border-collapse: separate;
}

#example2 {
  border-collapse: collapse;
}

Firstname	Lastname
John	Doe
John	Roe

Meaning

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

Separated border: Each table cell has an individual border.

Collapsing border: Adjacent table cells share borders.

Default value:	separate
Inherited:	No
Animatable:	No
Version:	CSS2
JavaScript syntax:	`object.style.borderCollapse="separate\|collapse\|initial\|inherit\|revert\|revert-layer\|unset";`

border-collapse: separate|collapse|initial|inherit|revert|revert-layer|unset;

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the values of this property.

Value	Description
separate	Adjacent cells have distinct borders (the separated-border table rendering model).
collapse	Adjacent cells have shared borders (the collapsed-border table rendering model).
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element animation-delay property.
revert	Reverts the cascaded value of the property from its current value to the value the property
revert-layer	Rollback styles to the ones specified in previous cascade layers.
unset	Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

selectors {
  border-collapse: separate;
}