การจัดการเซลล์ว่างด้วย CSS

คุณสมบัติ empty-cells ใน CSS ใช้สำหรับระบุการแสดงผลของเซลล์ว่างของตาราง ไวยากรณ์ของคุณสมบัติ CSS empty-cells ดังนี้:

ไวยากรณ์

Selector {    empty-cells: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS empty-cells:

<!DOCTYPE html> <html> <head> <style> table, table * {    border: groove; } table {    display: inline-block; } #demo1 {    empty-cells: show; } #demo2 {    empty-cells: hide; } </style> </head> <body> <h2>หัวข้อสาธิต</h2> <table id="demo1"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td></td> <td></td> <td>Six</td> </tr> <tr> <td></td> <td>Eight</td> <td></td> </tr> </table> <table id="demo2"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td></td> <td></td> <td>Six</td> </tr> <tr> <td></td> <td>Eight</td> <td></td> </tr> </table> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> table * {    border: ridge skyblue;    padding: 0.5rem; } table {    margin: 20px;    display: inline-block;    box-shadow: 0 0 6px 3px green; } #demo1 {    empty-cells: hide; } #demo2 {    empty-cells: show; } </style> </head> <body> <table id="demo1"> <tr> <th colspan="3">Hide</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <table id="demo2"> <tr> <th colspan="3">Show</th> </tr> <tr> <td></td> <td></td> </tr> </tr> <tr> <td></td> <td></td> </tr> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: