Border-collapse сипаттамасы

border-collapse сипаттамасы td ұяшықтары немесе th ұяшықтары арасындағы қос шекараларды HTML кестесінде (және ұяшық шекарасы мен кестенің өзі арасында) біріктіріп, бірдей көрсетеді.

Бұл сипаттама тек кестелер үшін және display сипаттамасы table немесе inline-table мәніне ие элементтер үшін қолданылады. Қарапайым блоктық элементтерде ол, әкімшілік айта кетейік, жұмыс істемейді. Ескертетін жайт, оны кестенің өзіне қолдану керек, ұяшықтарына емес.

Синтаксис

селектор {
	border-collapse: collapse | separate;
}

Мәндері

Мәні	Сипаттамасы
`collapse`	Қос шекаралар бірдей көрінеді. Қосымша әсерлері: `border-spacing` сипаттамасы және `cellspacing` атрибуты жұмыс істемей қояды.
`separate`	Кесте әрбір ұяшығының өз шекарасы болады (сондықтан кейбір жерлерде шекаралар қос болып көрінер егер, ұяшықтар арасындағы аралық нөлге тең болса).

Әдепкі мәні: separate.

Мысал . Separate мәні

Қазір кестеде барлық шекаралар қос (шекара ұяшықтарға да, кестенің өзіне де берілген):

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

Мысал . Separate мәні

Ал қазір шекара ұяшықтарға берілген, бірақ кестенің өзіне берілмеген. Екі ұяшықтың ортақ шекарасы бар жерлерде - шекаралар қос болады, қалған жерлерде - жалғыз:

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

Мысал . Collapse мәні

Қазір кестеде барлық шекаралар бірігіп, 1px қалыңдығында көрінер еді, біз қалағандай:

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