คุณสมบัติ borderCollapse ใช้สำหรับการตั้งค่าหรือส่งคืนว่า
| ซีเนียร์ | คุณค่าและคำอธิบาย |
|---|---|
| 1 | แยก นี่คือค่าเริ่มต้นและให้แต่ละเซลล์ของตารางมีเส้นขอบแยกจากกัน |
| 2 | ยุบ ระบุเส้นขอบที่จะไม่ถูกวาดระหว่างค่าของเซลล์ตาราง |
| 3 | เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| 4 | สืบทอด เพื่อสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ borderCollapse -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มยุบเส้นขอบ -
