A border-collapse tulajdonság

A border-collapse tulajdonság arra kényszeríti a kettős szegélyeket a td vagy a th cellák között egy HTML táblázatban (és a cella szegélye és maga a táblázat szegélye között), hogy összeolvadjanak és egyetlen szegélyként jelenjenek meg.

Ez a tulajdonság csak táblázatokra és olyan elemekre vonatkozik, melyek display tulajdonsága table vagy inline-table. Sajnos közönséges blokkos elemeken nem fog működni. Vegye figyelembe, hogy a táblázatra kell alkalmazni, nem a celláira.

Szintaxis

szelektor {
	border-collapse: collapse | separate;
}

Értékek

Érték	Leírás
`collapse`	A kettős szegélyek egyetlen szegélyként fognak megjelenni. Vannak mellékhatások: a `border-spacing` tulajdonság és a `cellspacing` attribútum megszűnik működni.
`separate`	A táblázat minden cellája meg fogja tartani a saját szegélyét (emiatt néhány helyen a szegélyek kettősnek tűnnek, ha a cellák közötti távolság nulla).

Alapértelmezett érték: separate.

Példa . Separate érték

Jelenleg a táblázatban minden szegély kettős (szegély van megadva mind a celláknak, mind magának a táblázatnak):

<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;
}

Példa . Separate érték

Most a szegély a celláknak van megadva, de magának a táblázatnak nincs. Ahol két cellának van közös szegélye, ott a szegély kettősnek fog tűnni, minden más helyen pedig egyszerűnek:

<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;
}

Példa . Collapse érték

Most a táblázatban minden szegély összeolvad és 1px vastagnak fog megjelenni, ahogy azt szerettük volna:

<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;
}