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

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

คุณสมบัติ border-spacing ระบุความกว้างระหว่างเซลล์ตาราง รับค่า 1 หรือ 2 ค่า หน่วยเป็นความยาว

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อกำหนดความกว้างของเซลล์ตาราง:

<html>
  <head>
    <style>
      table.one {
        border-collapse: separate;
        width: 300px;
        border-spacing: 15px 40px;
      }
    </style>
  </head>
  <body>
    <table class="one" border="2">
      <caption>The border-spacing property</caption>
      <tr><td>India</td></tr>
      <tr><td>UK</td></tr>
    </table>
    <br />
  </body>
</html>

รายละเอียด:

• ทำงานก็ต่อเมื่อ border-collapse: separate (ค่าเริ่มต้น)
• 1 ค่า: ระยะห่างทั้งแนวนอนและแนวตั้ง
• 2 ค่า: ค่าแรก = แนวนอน, ค่าที่สอง = แนวตั้ง
• หน่วย: px, em, rem, cm, ฯลฯ
• ค่าเริ่มต้น: 0