คุณสมบัติ borderSpacing ของ HTML DOM Style: ระยะห่างเซลล์ตาราง

คุณสมบัติ borderSpacing ใช้สำหรับกำหนดหรือดึงค่าระยะห่างระหว่างเซลล์ในตาราง (table) ทำงานเมื่อ border-collapse: separate (ค่าเริ่มต้น)

ไวยากรณ์ (Syntax)

object.style.borderSpacing = "length length|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  div { display: flex; float: left; }
  table { border: 3px solid black; }
  td { border: 3px solid lightgreen; }
  th { border: 3px solid lightblue; }
</style>
<script>
  function IncreaseBorderSpacing() {
    document.getElementById("t1").style.borderSpacing = "10px 10px";
    document.getElementById("Sample").innerHTML = "ระยะห่างขอบตารางถูกเพิ่มเป็น 10px แล้ว";
  }
</script>
</head>
<body>
<table id="t1">
  <tr><th>ผลไม้</th><th>ราคา</th></tr>
  <tr><td>มะม่วง</td><td>40</td></tr>
  <tr><td>แอปเปิ้ล</td><td>50</td></tr>
</table>
<p>คลิกปุ่มเพื่อเพิ่มระยะห่างขอบตารางด้านบน</p>
<button onclick="IncreaseBorderSpacing()">เพิ่มระยะห่างขอบ</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: เซลล์ติดกัน (border-spacing: 0)
หลัง: เซลล์ห่างกัน 10px ทั้งแนวนอนและแนวตั้ง

ความสัมพันธ์กับ border-collapse

หมายเหตุ: ถ้าใช้ border-collapse: collapse คุณสมบัติ borderSpacing จะไม่มีผล

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
  empty-cells: hide; /* ซ่อนขอบของเซลล์ว่าง */
}