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