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