Border-collapse xüsusiyyəti

border-collapse xüsusiyyəti td xanaları və ya th xanaları arasındakı ikiqat sərhədləri (həmçinin xana sərhədi ilə cədvəl özü arasındakı sərhədi) HTML cədvəlində birləşdirərək tək sərhəd kimi göstərir.

Bu xüsusiyyət yalnız cədvəllərə və display xüsusiyyəti table və ya inline-table olan elementlərə tətbiq edilir. Adi blok elementlərə, təəssüf ki, təsir etmir. Unutmayın ki, bu xüsusiyyət cədvələ tətbiq edilməlidir, xanalarına deyil.

Sintaksis

selektor {
	border-collapse: collapse | separate;
}

Dəyərlər

Dəyər	Təsvir
`collapse`	Ikiqat sərhədlər tək kimi görünəcək. Yan təsirləri var: `border-spacing` xüsusiyyəti və `cellspacing` atributu işləməyəcək.
`separate`	Cədvəlin hər xanasının öz sərhədi olacaq (buna görə də, əgər xanalar arasındakı məsafə sıfırdırsa, bəzi yerlərdə sərhədlər ikiqat görünə bilər).

Susmaya görə dəyər: separate.

Nümunə . Separate dəyəri

Hal-hazırda cədvəldə bütün sərhədlər ikiqatdır (sərhəd həm xanalara, həm də cədvəlin özünə tətbiq edilib):

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

Nümunə . Separate dəyəri

Indi isə sərhəd yalnız xanalara tətbiq edilib, cədvəlin özünə edilməyib. Iki xananın ortaq sərhədi olduğu yerlərdə sərhədlər ikiqat, qalan yerlərdə isə tək olacaq:

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

Nümunə . Collapse dəyəri

Hal-hazırda cədvəldə bütün sərhədlər birləşəcək və arzu olunduğu kimi 1px qalınlığında görünəcək:

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