Vlastnost border-collapse

Vlastnost border-collapse způsobí, že se dvojité okraje mezi buňkami td nebo buňkami th HTML tabulky (a mezi okrajem buňky a samotné tabulky) sloučí a vypadají jako jeden.

Tato vlastnost se aplikuje pouze na tabulky a na prvky s display s hodnotou table nebo inline-table. U běžných blokových prvků, bohužel, fungovat nebude. Mějte na paměti, že je třeba ji aplikovat na tabulku, nikoli na její buňky.

Syntaxe

selektor {
	border-collapse: collapse | separate;
}

Hodnoty

Hodnota	Popis
`collapse`	Dvojité okraje budou vypadat jako jeden. Existují vedlejší efekty: přestane fungovat vlastnost `border-spacing` a atribut `cellspacing`.
`separate`	Každá buňka tabulky bude mít svůj vlastní okraj (proto na některých místech budou okraje dvojité, pokud je mezera mezi buňkami nulová).

Výchozí hodnota: separate.

Příklad . Hodnota separate

Nyní jsou v tabulce všechny okraje dvojité (okraj je nastaven buňkám i samotné tabulce):

<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říklad . Hodnota separate

Nyní je okraj nastaven buňkám, ale samotné tabulce není nastaven. Tam, kde mají dvě buňky společný okraj, - okraje budou dvojité, na ostatních místech - jednoduché:

<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říklad . Hodnota collapse

Nyní se všechny okraje v tabulce sloučí a budou vypadat s tloušťkou 1px, jak bychom chtěli:

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