Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-collapse

border-collapse

Specifies how borders between table cells are shared.

Sample Code

style.css

/* Draw cell borders separately (default) */
table.test { border-collapse: separate;}

/* Share cell borders (adjacent cells share one border line) */
table.test1 { border-collapse: collapse;}

/* Practical example: clean table with collapse */
table.clean {
	border-collapse: collapse;
	width: 100%;
}
table.clean th,
table.clean td {
	border: 1px solid #ddd;
	padding: 8px 12px;
}
table.clean th { background-color: #f4f4f4;}

/* Practical example: separate with spacing */
table.spaced {
	border-collapse: separate;
	border-spacing: 4px;
}

Available Values

Value	Description
separate	Each cell has its own individual border. This is the default value.
collapse	Adjacent borders are merged into a single shared border.

Browser Preview

In the samples below, the table element has『border: solid 1px #f00』, and each td element has either『border: solid 1px #00f』or『border: solid 1px #0f0』.

<table style="border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>

<table style="border-collapse: collapse; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>