Thuộc tính empty-cell trong CSS

Thuộc tính empty-cell trong CSS được sử dụng để điều khiển Model hiển thị của ô trong bảng khi ô này không có nội dung. Khi được sử dụng trong Layout mà có phần Border được xác định riêng rẽ (Separate Border), phần ô không có nội dung sẽ không có đường viền.

Thuộc tính empty-cell có thể nhận giá trị:

show: hiển thị cả phần border cho ô mà không có nội dung.
hide: không hiển thị.

Thuộc tính empty-cell có thể áp dụng cho:

Tất cả phần tử được hiển thị dưới dạng một ô trong bảng.

Cú pháp thuộc tính empty-cell trong DOM

object.style.emptyCell = "hide";

Ví dụ thuộc tính empty-cell trong CSS

Trong ví dụ sau, mình ẩn border của ô mà không có nội dung với việc sử dụng giá trị hide của thuộc tính empty-cell trong CSS.

<html>
   <head>
   
      <style type="text/css">
         table.empty{
            width:350px;
            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>Dau de cho cot</th>
            <th>Dau de cho cot</th>
         </tr>
      
         <tr>
            <th>Dau de cho hang</th>
            <td class="empty">Gia tri</td>
            <td class="empty">Gia tri</td>
         </tr>
      
         <tr>
            <th>Dau de cho hang</th>
            <td class="empty">Gia tri</td>
            <td class="empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: