border-collapse касиети

border-collapse касиети td уячаларынын же th уячаларынын ортосундагы кош чектерди (жана уячанын чеги менен таблицанын өзүнүн ортосундагы чекти) таблицанын бир чек сыяктуу кылып, бириктирет.

Бул касиет таблицалар үчүн гана колдонулат жана 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;
}