თვისება 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;
}