Свойство border-collapse

border-collapse свойстваси td ҳужайралари ёки th ҳужайралари орасидаги иккиланган чекларини (ва ҳужайра чеги ва жадвалнинг ўзининг чеги орасида) чеккалаб, битта чеққа ўхшаш қилиб қўяди.

Бу свойства фақат жадваллар учун ва display table ёки inline-table қийматли элементлар учун қўлланилади. Одатдаги блокли элементлар учун, афсуски, ишламayди. Эътибор беринг, қўллаш ҳужайраларга эмас, балки жадвалнинг ўзига қаратилиши керак.

Синтаксис

селектор {
	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;
}