การใช้งานคุณสมบัติ border-collapse ใน CSS

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

คุณสมบัติ border-collapse ระบุว่าเบราว์เซอร์ควรควบคุมลักษณะของขอบที่ติดกันหรือให้แต่ละเซลล์รักษาสไตล์ของตัวเอง

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของ border-collapse property:

<html>
  <head>
    <style>
      table.one {
        border-collapse: collapse;
      }
      table.two {
        border-collapse: separate;
      }
      td.a {
        border-style: dotted;
        border-width: 2px;
        border-color: #000000;
        padding: 20px;
      }
      td.b {
        border-style: solid;
        border-width: 2px;
        border-color: #333333;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <table class="one">
      <caption>Border Collapse</caption>
      <tr><td class="a">India</td></tr>
      <tr><td class="b">Australia</td></tr>
    </table>
    <br />
    <table class="two">
      <caption>Border Separate</caption>
      <tr><td class="a">India</td></tr>
      <tr><td class="b">Australia</td></tr>
    </table>
  </body>
</html>

ค่าที่ใช้ได้:

• collapse - ขอบรวมกันเป็นเส้นเดียว (single border model)
• separate - ขอบแยกกันแต่ละเซลล์ (separated borders model, ค่าเริ่มต้น)
• inherit - สืบทอดจากพาเรนต์

เมื่อใช้ collapse จะไม่สามารถใช้ border-spacing ได้