Thuộc tính empty-cells trong CSS được dùng để chỉ định hiển thị các ô trống của một bảng.
Cú pháp
Selector { empty-cells: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính 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>Tiêu đề Demo</h2> <table id="demo1"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>Một</td> <td>Hai</td> <td>Ba</td> </tr> <tr> <td></td> <td></td> <td>Sáu</td> </tr> <tr> <td></td> <td>Tám</td> <td></td> </tr> </table> <table id="demo2"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>Một</td> <td>Hai</td> <td>Ba</td> </tr> <tr> <td></td> <td></td> <td>Sáu</td> </tr> <tr> <td></td> <td>Tám</td> <td></td> </tr> </table> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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">Ẩn</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">Hiện</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
