比 更好的替代方法來顯示空的HTML表格單元格嗎？

Question

這是一個經典的問題 - 當你有一個空的表格單元時，瀏覽器不會在其周圍渲染邊框。還有兩個衆所周知的解決方法。一種是在表格單元中放置一個 ;另一種是使用empty-cells:show CSS屬性。

不幸的是兩者都有缺點。  在選擇文本和複製粘貼時有點難看。你會得到很多不應該有的空間，甚至可能帶有奇特的Unicode字符。 empty-cells:show應該正好解決這個問題，但不幸的是，它只能在從版本8開始的IE中正常工作（然後只在符合標準的模式下）。可以通過指定border-collapse: collapse來使其在其他版本中工作，但有時這是不需要的。在我的情況下，我有一個相當複雜的表，它依賴於border-collapse:separate，否則會產生相當混亂的CSS/HTML湯。

那麼，你可能會放在一個表格單元格中，讓IE繪製邊界，但不可見或可複製的其他東西？對於所有其他瀏覽器empty-cells:show已經做到了這一點，所以我真的只需要欺騙IE瀏覽器。

Answer 1

你也可以把無形br元素：

<td><br style="visibility:hidden"></td> 

這是不必要的代碼可笑量，但它使絕招 - 不添加額外的文本還顯示細胞。

請注意，根據官方規範http://www.w3.org/TR/html401/struct/text.html#edef-BR，<br/>是無效的HTML語法。但是，它是有效的XHTML語法。

Answer 2

您可以使用此CSS代碼顯示單元格。我成功地在Safari和Firefox中測試了它。我想它也適用於其他瀏覽器。

table { 
 
    width: 100%; 
 
    border: 0; 
 
    empty-cells: show; 
 
} 
 
td { 
 
    border: 1px solid grey; 
 
} 
 
td:empty:after { 
 
    content: '.'; 
 
    color: transparent; 
 
    visibility: hidden; 
 
} 
 
/* alternate background */ 
 

 
tr:nth-child(odd) td { 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
tr:nth-child(even) td { 
 
    background: rgba(0, 0, 0, 0.1); 
 
}

<table> 
 
    <tr> 
 
    <td>Row</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>