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

คุณสมบัติ empty-cells กำหนดให้เบราว์เซอร์ แสดงพื้นหลังและขอบของ เซลล์ td หรือ เซลล์ th ที่ว่างใน ตาราง HTML: ว่าจะแสดงหรือไม่

เซลล์จะถือว่าว่างในกรณีต่อไปนี้: ไม่มีอักขระใดๆ เลย, ในเซลล์มีเพียง ช่องว่าง (หนึ่งหรือหลายช่อง), การขึ้น บรรทัดใหม่ หรืออักขระแท็บ, หรือคุณสมบัติ visibility ถูกตั้งค่าเป็น hidden

เพื่อทำให้เซลล์ไม่ว่าง แต่ในขณะเดียวกัน ไม่มีข้อความที่มองเห็นได้ ใช้เทคนิค ดังนี้: ในเซลล์ให้ใส่ช่องว่างที่ไม่แตกบรรทัด  

คุณสมบัตินี้จะไม่ทำงาน หากกำหนด border-collapse เป็นค่า collapse

ไวยากรณ์

cssตัวเลือก {
  empty-cells: show | hide;
}

ค่าต่างๆ

ค่าเริ่มต้น: show

ตัวอย่าง . ค่า show

ตอนนี้ในตารางมีบางเซลล์ที่ว่าง, แต่พวกมันยังคงมีขอบและพื้นหลัง:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

ตัวอย่าง . ค่า hide

แต่ตอนนี้เซลล์ว่างจะไม่มี พื้นหลังและขอบ:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

ดูเพิ่มเติม