Vetia border-collapse

Vetia border-collapse i detyron kufijtë e dyfishtë midis qelizave td ose qelizave th të tabelës HTML (dhe midis kufirit të qelizës dhe vetë tabelës) të shemben dhe të duken si një i vetëm.

Kjo vetë aplikohet vetëm për tabela dhe për elementë me display në vlerën table ose inline-table. Për elementët e zakonshëm bllok, për fat të keq, nuk do të funksionojë. Ki parasysh që duhet aplikuar për tabelën, jo për qelizat e saj.

Sintaksa

selektori {
	border-collapse: collapse | separate;
}

Vlerat

Vlera	Përshkrimi
`collapse`	Kufijtë e dyfishtë do të duken si një i vetëm. Ka efekte anësore: do të ndalojë së punuari vetia `border-spacing` dhe atributi `cellspacing`.
`separate`	Çdo qelizë e tabelës do të ketë kufirin e saj (prandaj në disa vende kufijtë do të jenë të dyfishtë, nëse hapësira midis qelizave është zero).

Vlera e paracaktuar: separate.

Shembull . Vlera separate

Tani në tabelë të gjithë kufijtë janë të dyfishtë (kufiri është caktuar edhe qelizave, edhe vetë tabelës):

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

Shembull . Vlera separate

Tani kufiri është caktuar qelizave, por vetë tabelës nuk i është caktuar. Aty ku dy qeliza kanë kufi të përbashkët, - kufijtë do të jenë të dyfishtë, në vendet e tjera - të vetëm:

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

Shembull . Vlera collapse

Tani në tabelë të gjithë kufijtë do të shemben dhe do të duken me trashësi 1px, ashtu siç do të donim:

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