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

คุณสมบัติ empty-cells

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

ตัวอย่าง

คุณสมบัตินี้มีค่าได้ 3 ค่า: show, hide, inherit

<html>
  <head>
    <style>
      table.empty {
        width: 400px;
        border-collapse: separate;
        empty-cells: hide;
      }
      td.empty {
        padding: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: #999999;
      }
    </style>
  </head>
  <body>
    <table class="empty">
      <tr>
        <th></th>
        <th>Title one</th>
        <th>Title two</th>
      </tr>
      <tr>
        <th>Row Title</th>
        <td class="empty">R1T1</td>
        <td class="empty">R1T2</td>
      </tr>
      <tr>
        <th>Row Title</th>
        <td class="empty">R2T1</td>
        <td class="empty"></td>
      </tr>
    </table>
  </body>
</html>

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

• show - แสดงขอบและพื้นหลังของเซลล์ว่าง (ค่าเริ่มต้น)
• hide - ซ่อนขอบและพื้นหลังของเซลล์ว่าง
• inherit - สืบทอดจากพาเรนต์

ทำงานก็ต่อเมื่อ border-collapse: separate