The border-collapse property

The border-collapse property causes double borders between td or th cells of an HTML table (and also between the cell border and table itself) collapse and look like single.

This property applies only to tables and to elements with display in the table or inline-table value. Unfortunately, it will not work for ordinary block elements. Please note that you should apply it to the table, not its cells.

Syntax

selector {
	border-collapse: collapse | separate;
}

Values

Value	Description
`collapse`	Double borders will appear as one. There are side effects: the `border-spacing` property and `cellspacing` attribute will stop to act.
`separate`	Each table cell will have its own border (so in some places the borders will be double if the space between cells is zero).

Default value: separate.

Example . The separate value

Now all the borders in the table are double (the border is given to both the cells and the table itself):

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Example . The separate value

And now the border is given to the cells, but not to the table itself. Where two cells have a common border, the borders will be double, in other places - single:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
}
td {
	border: 1px solid red;
	text-align: center;
}

Example . The collapse value

Now in the table all the borders will collapse and will look 1px thick, as we would like:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}