คุณสมบัติ borderCollapse ใช้ตั้งค่าหรือคืนค่าว่าองค์ประกอบ <table> ควรมีขอบร่วมกัน (shared) หรือแยกกัน (separate) รับได้ 2 ค่า คือ separate และ collapse
ไวยากรณ์ (Syntax)
object.style.borderCollapse = "separate|collapse|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | separate ค่าเริ่มต้น แต่ละเซลล์ตารางมีขอบแยกกัน |
| 2 | collapse ระบุว่าไม่ได้วาดขอบระหว่างค่าเซลล์ตาราง |
| 3 | initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 4 | inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!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 collapseBorder(){
document.getElementById("t1").style.borderCollapse="collapse";
document.getElementById("Sample").innerHTML="The table borders are now collapsed";
}
</script> </head>
<body>
<table id="t1">
<tr> <th>FRUITS</th> <th>PRICE </th> </tr>
<tr> <td>MANGO </td> <td>40</td> </tr>
<tr> <td>APPLE</td> <td>50</td> </tr>
</table>
<p>Collapse the above table borders by clicking the below button</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม COLLAPSE BORDER:
