คุณสมบัติ 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;
}