border-collapse ဂုဏ်သတ္တိ

border-collapse ဂုဏ်သတ္တိသည် td ဆဲလ်များ အကြား သို့မဟုတ် th ဆဲလ်များ အကြား ရှိ HTML ဇယားကွက် ၏ နှစ်ထပ်နယ်နိမိတ်များကို (ဆဲလ်၏နယ်နိမိတ်နှင့် ဇယားကွက်၏နယ်နိမိတ်အကြား) တစ်ခုတည်းအဖြစ် ပေါင်းစည်းစေပြီး ပြသစေသည်။

ဤဂုဏ်သတ္တိကို ဇယားကွက်များအတွက်နှင့် display တန်ဖိုး table သို့မဟုတ် inline-table ရှိသော အစိတ်အပိုင်းများအတွက်သာ အသုံးပြုနိုင်သည်။ သာမန် ဘလောက် အစိတ်အပိုင်းများအတွက်မူ ၎င်းသည် အလုပ်မလုပ်ပါ။ သတိပြုရန် - ဤဂုဏ်သတ္တိကို ၎င်း၏ဆဲလ်များအတွက် မဟုတ်ဘဲ ဇယားကွက်အတွက် သတ်မှတ်ရမည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	border-collapse: collapse | separate;
}

တန်ဖိုးများ

တန်ဖိုး ရှင်းလင်းချက်

collapse နှစ်ထပ်နယ်နိမိတ်များသည် တစ်ခုတည်းအဖြစ် ပြသလိမ့်မည်။ ဘေးထွက်အကျိုးဆက်များရှိသည်- border-spacing ဂုဏ်သတ္တိနှင့် cellspacing attribute တို့သည် အလုပ်မလုပ်တော့ပါ။

separate ဇယားကွက်၏ ဆဲလ်တစ်ခုစီတွင် သီးခြားနယ်နိမိတ်ရှိလိမ့်မည် (ထို့ကြောင့် ဆဲလ်များအကြား အကွာအဝေး သုညဖြစ်ပါက အချို့နေရာများတွင် နယ်နိမိတ်များသည် နှစ်ထပ်ဖြစ်နေမည်)။

တန်ဖိုး	ရှင်းလင်းချက်
`collapse`	နှစ်ထပ်နယ်နိမိတ်များသည် တစ်ခုတည်းအဖြစ် ပြသလိမ့်မည်။ ဘေးထွက်အကျိုးဆက်များရှိသည်- `border-spacing` ဂုဏ်သတ္တိနှင့် `cellspacing` attribute တို့သည် အလုပ်မလုပ်တော့ပါ။
`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;
}