Lepsza alternatywa niż do wyświetlania pustych komórek tabeli HTML?

Question

To klasyczny problem - gdy masz pustą komórkę tabeli, przeglądarka nie renderuje obramowań wokół niej. Istnieją również dwa dobrze znane rozwiązania. Jednym z nich jest umieszczenie   w komórce tabeli; drugim jest użycie właściwości CSS empty-cells:show.

Niestety oba mają wady.   jest trochę brzydki, jeśli chodzi o zaznaczanie tekstu i kopiowanie - wklejanie go. Dostajesz dużo przestrzeni, w których nie powinno być żadnych, może nawet z egzotyczną postacią Unicode. empty-cells:show powinien rozwiązać dokładnie ten problem, ale niestety działa poprawnie tylko w IE, począwszy od wersji 8 (a następnie tylko w trybie zgodnym ze standardami). Można go użyć do pracy w innych wersjach, podając także border-collapse: collapse, ale czasami NIE jest to pożądane. W moim przypadku mam dość złożoną tabelę i opiera się ona na border-collapse:separate i w przeciwnym razie tworzyłby dość niechlujną zupę CSS/HTML.

Co jeszcze można umieścić w komórce tabeli, która spowodowałaby, że IE narysuje krawędzie, ale nie są widoczne lub można je skopiować? Dla wszystkich innych przeglądarek empty-cells:show robi już sztuczkę, więc naprawdę muszę oszukać IE.

Answer 1

Można również umieścić niewidoczny elementu BR:

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

To śmieszne ilość zbędnego kodu, ale to sprawia, że ​​podstęp - bez dodatkowego tekstu jeszcze wyświetlana jest komórka.

Należy pamiętać, że <br/> jest nieprawidłową składnią HTML zgodnie z oficjalnymi specyfikacjami http://www.w3.org/TR/html401/struct/text.html#edef-BR. Jest to jednak poprawna składnia XHTML.

Answer 2

Możesz pokazać komórki za pomocą tego kodu CSS. Z powodzeniem przetestowałem go w Safari i Firefox. Myślę, że działa również w innych przeglądarkach.

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>