คุณสมบัติ border-spacing

คุณสมบัติ border-spacing กำหนดระยะห่าง ระหว่างเซลล์ td หรือเซลล์ th ของ ตาราง HTML (และระหว่างขอบเขตของเซลล์กับตัวตารางเอง) ค่าของคุณสมบัติเป็น หน่วยวัดขนาด ใดๆ ก็ได้ ยกเว้นเปอร์เซ็นต์

ไวยากรณ์

selector {
	border-spacing: หนึ่งหรือสองค่า;
}

ค่า

ค่า	คำอธิบาย
หนึ่งค่า	ค่าดียวกำหนดระยะห่างที่เท่ากันระหว่างเซลล์ ทั้งในแนวตั้งและแนวนอน
สองค่า	ค่าแรกกำหนดระยะห่างในแนวนอน และค่า ที่สองกำหนดระยะห่างในแนวตั้ง

ค่าเริ่มต้น: 0 อย่างไรก็ตาม เบราว์เซอร์แต่ละตัวมีค่าของแอตทริบิวต์ cellspacing ของตัวเองซึ่งไม่ใช่ศูนย์ ดังนั้นโดยค่าปกติคุณจะเห็นระยะห่างระหว่าง เซลล์

หมายเหตุ

ใช้คุณสมบัตินี้กับตาราง ไม่ใช่กับ เซลล์ของมัน (จะไม่ทำงานกับเซลล์)

ไม่สามารถได้ผลลัพธ์แบบเดียวกันโดยใช้ margin เนื่องจาก margin ไม่ ทำงานสำหรับเซลล์ตาราง

หากกำหนดคุณสมบัติ border-collapse เป็นค่า collapse - border-spacing จะไม่ทำงาน

ตัวอย่าง . หนึ่งค่า

มาทำให้ระยะห่างระหว่างเซลล์ (และ ระหว่างเซลล์กับขอบตาราง) เป็น 10px กัน:

<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-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

ตัวอย่าง . สองค่า

และตอนนี้กำหนดระยะห่างเป็น 10px ใน แนวนอน และ 30px ในแนวตั้ง:

<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-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

ตัวอย่าง . กำหนด border-collapse: collapse

แต่ตอนนี้ border-spacing จะ ไม่ทำงานเนื่องจากคุณสมบัติ border-collapse มีค่าเป็น collapse:

<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;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}