CSS empty cell

CSS空單元格（empty cell）主要是用來指定在表格中空單元格的樣式。通過這個屬性，您甚至可以將空單元格變成一個有顏色的背景，這樣整個表格會更加地美觀。

一、使用empty-cell屬性

empty-cell屬性主要有兩個取值：show和hide。其中show是默認值，表示顯示空單元格。而hide則表示隱藏空單元格。

可以用下面的 CSS 代碼段來使用empty-cell屬性並設定含有空單元格的表格的單元格周圍的邊框不跨越空行、空列：

table {
   empty-cells: hide;           /*隱藏空單元*/
   border-collapse: collapse;  /*合併邊框*/
}
 

這段代碼中的 empty-cells 屬性是用來隱藏單元格的，當然你也可以設置為show，就是顯示空單元格。

二、配合background-color屬性

使用background-color屬性將前景顏色設為與背景顏色相同的單元格難以被辨別，可以看一個例子：

table {
   empty-cells: show;
   border-collapse: collapse;
}
td.empty {
   background-color: #FF0000;
}
 

  

    

      
1
      
2
      
3
      

    
    

      
4
      
5
      

      
7
    
    

      
8
      
9
      
10
      
11
    
  
 

在上面的例子中，第二行第三列為空單元格（沒有填寫具體內容），使用了empty-cells屬性，並配合background-color屬性設置了單元格的背景色。這樣的話，空單元格就變成了紅色背景，而不會被忽略。

三、配合::before偽元素添加內容

有時，您可能希望在空白單元格中添加一些文本或符號，以強調他們。這時可以利用CSS中的::before偽元素，將內容添加到空的單元格中：

table {
   empty-cells: show;
   border-collapse: collapse;
}
td.empty::before {
   content: "N/A";
}
 

  

    

      
1
      
2
      
3
      

    
    

      
4
      
5
      

      
7
    
    

      
8
      
9
      
10
      
11
    
  
 

在上面的例子中，我們使用CSS中的::before偽元素來插入文本”N/A”到單元格中。這樣空白的單元格就變成了”N/A”，看起來就不太尷尬。

總結

通過本文，我們可以看到在表格布局中，如果有一些空單元格十分尷尬，使用empty-cell屬性，我們可以將空單元格的邊框設為跨過（hide）或不跨過（show）默認邊框的位置。我們也可以利用CSS中的::before偽元素，將文本添加到空的單元格中。