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> 

Kết quả là:

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.