คุณสมบัติ 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>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มยุบเส้นขอบ -