Prevent upadek pustych wierszy w tabeli HTML za pomocą CSS

Question

Mam tabeli HTML, co następuje:

<table border="1"> 
 
    <tr> 
 
     <td>Row with text</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><!-- Empty row --> 
 
    </tr> 
 
</table>

Po uruchomieniu zobaczysz drugi rząd jest zwinięty, ale zamiast tego był renderowany niepokrytym, z tą samą wysokością co pierwszy rząd. Jednym ze sposobów osiągnięcia tego celu jest umieścić jednostkę  , co następuje:

<table border="1"> 
 
    <tr> 
 
     <td>Row with text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td><!-- Empty row --> 
 
    </tr> 
 
</table>

Czy istnieje sposób mogę osiągnąć drugi wynik, poprzez CSS, za pomocą HTML z pierwszym fragmencie?

Answer 1

Można użyć tego kodu:

td:empty:after{ 
    content: "\00a0"; 
} 

Dodaje uciekł  po każdym początkowo pustej td, rozwiązując problem.

td:empty:after{ 
 
    content: "\00a0"; 
 
}

<table border="1"> 
 
    <tr> 
 
     <td>Row with text</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><!-- Empty row --> 
 
    </tr> 
 
    <tr> 
 
     <td>asd</td> 
 
    </tr> 
 
    <tr> 
 
     <td>dees</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><!-- Empty row --> 
 
    </tr> 
 
</table>

Dowiedz się więcej o ucieczce podmioty HTML here.

Answer 2

Możesz dodać height do komórki tabeli, w tym przypadku będzie działać tak jak własność min-height dla innych elementów (z display: block, display: inline-block itd.). I dodaje kolejny wiersz tabeli z długim tekście, aby go wykazać:

td { 
 
    height: 22px; 
 
}

<table border="1"> 
 
    <tr> 
 
     <td>Row with text</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><!-- Empty row --> 
 
    </tr> 
 
    <tr> 
 
     <td>Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words</td> 
 
    </tr> 
 
</table>

Nie można używać min-height właściwość, ponieważ the specification mówi:

W CSS 2.1, efekt "min-height" i "max-height" w tabelach, tabelach wstawianych, komórkach tabeli, wierszach tabel i grupach wierszy są niezdefiniowane.