Lastnost border-collapse

Lastnost border-collapse povzroči, da se dvojni robovi med celicami td ali celicami th HTML tabele (ter med robom celice in robom tabele same) strnijo in izgledajo kot en sam.

Ta lastnost se uporablja samo za tabele in za elemente z display v vrednosti table ali inline-table. Za običajne bločne elemente žal ne deluje. Upoštevajte, da jo je treba uporabiti za tabelo, ne za njene celice.

Sintaksa

selektor {
	border-collapse: collapse | separate;
}

Vrednosti

Vrednost	Opis
`collapse`	Dvojni robovi bodo videti kot en sam. Obstajajo stranski učinki: prenehalo bo delovati lastnost `border-spacing` in atribut `cellspacing`.
`separate`	Vsaka celica tabele bo imela svoj rob (zato bodo robovi na nekaterih mestih dvojni, če je razmik med celicami enak nič).

Privzeta vrednost: separate.

Primer . Vrednost separate

Trenutno so vsi robovi v tabeli dvojni (rob je določen tako celicam kot tabeli sami):

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

Primer . Vrednost separate

Trenutno je rob določen celicam, vendar tabeli sami ni določen. Tam, kjer imata dve celici skupen rob, bodo robovi dvojni, na ostalih mestih pa enojni:

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

Primer . Vrednost collapse

Trenutno se bodo vsi robovi v tabeli strnili in izgledali z debelino 1px, kot želimo:

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