Border-collapse-ominaisuus

Ominaisuus border-collapse pakottaa td -solujen tai th -solujen väliset kaksoisreunat HTML-taulukossa (sekä solun reunan ja taulukon reunan väliset) yhtymään ja näyttämään yhdeltä reunalta.

Tätä ominaisuutta sovelletaan vain taulukoihin ja elementteihin, joiden display -ominaisuuden arvo on table tai inline-table. Tavallisille lohkoelementeille se, valitettavasti, ei toimi. Huomaa, että ominaisuus tulee asettaa taulukolle, eikä sen soluille.

Syntaksi

valitsija {
	border-collapse: collapse | separate;
}

Arvot

Arvo	Kuvaus
`collapse`	Kaksoisreunat näyttävät yhdeltä reunalta. On sivuvaikutuksia: ominaisuus `border-spacing` ja attribuutti `cellspacing` eivät toimi.
`separate`	Jokaisella taulukon solulla on oma reuna (siksi joissakin kohdissa reunat ovat kaksoisreunoja, jos solujen välinen väli on nolla).

Oletusarvo: separate.

Esimerkki . Arvo separate

Tällä hetkellä taulukossa kaikki reunat ovat kaksinkertaisia (reuna on asetettu sekä soluille että taulukolle itselleen):

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

Esimerkki . Arvo separate

Nyt reuna on asetettu soluille, mutta taulukolle itselleen ei ole asetettu. Siellä, missä kahdella solulla on yhteinen reuna, - reunat ovat kaksinkertaiset, muissa paikoissa - yksittäiset:

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

Esimerkki . Arvo collapse

Nyt taulukossa kaikki reunat yhdistyvät ja näyttävät 1px paksuisilta, kuten haluttiinkin:

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