Boş HTML tablo hücrelerini göstermek için 'dan daha iyi bir alternatif?

Question

Klasik bir sorun - boş bir masa hücreniz olduğunda tarayıcı etrafındaki kenarlıkları çizmiyor. İyi bilinen iki çözüm de var. Biri, tablo hücresine bir   yerleştirmektir; diğeri empty-cells:show CSS özelliğini kullanmaktır.

Maalesef her ikisi de dezavantajları vardır. Metin seçerken ve kopyalayıp yapıştırırken   çirkin. Bir egzotik Unicode karakteriyle belki de olmaması gereken çok fazla alan elde edersiniz. empty-cells:show tam olarak bu sorunu ele almalıdır, ancak maalesef yalnızca IE sürümüyle (ve daha sonra standart uyumlu modda) başlayan IE'de düzgün çalışır. border-collapse: collapse'u da belirterek diğer sürümlerde çalışmak için yapılabilir, ancak bazen bu istenen bir şey değildir. Benim durumumda oldukça karmaşık bir tablo var ve border-collapse:separate dayanır ve aksi takdirde oldukça dağınık bir CSS/HTML çorbası oluşturur.

Peki, bir tablo hücresine IE'nin sınırları çizmesini sağlayacak, görünmeyebilir veya kopyalanmayacak başka şeyler neler olabilir? Diğer tüm tarayıcılarda empty-cells:show zaten hile yapar, bu yüzden IE'yi kandırmaya ihtiyacım var. Hiçbir ek metin henüz hücre görüntülenir eklendi - Gereksiz kod saçma miktarı, ancak hile yapar

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

:

Answer 1

Ayrıca görünmez br elemanı koyabilirsiniz.

Not <br/>'un resmi belirtimlerine göre geçersiz HTML sözdizimini http://www.w3.org/TR/html401/struct/text.html#edef-BR unutmayın. Ancak geçerli bir XHTML sözdizimi.

Answer 2

Bu CSS koduyla hücreleri gösterebilirsiniz. Safari ve Firefox'ta başarılı bir şekilde test ettim. Sanırım diğer tarayıcılarda da çalışıyor. Anlamlı diğer yoksa alternatif olarak ve yazma class="e" />

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>