Prevent Zusammenbruch der leeren Zeilen in HTML-Tabelle über CSS

Question

Ich habe eine HTML-Tabelle wie folgt:

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

Wenn Sie dies führen Sie die zweite Reihe ist zusammengebrochen sehen werden, aber ich Es wurde vielmehr zusammengelegt, mit derselben Höhe wie die erste Reihe. Eine Möglichkeit, dies zu tun, ist eine   Einheit zu setzen, wie folgt:

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

Gibt es eine Weise, die ich das zweite Ergebnis erzielen kann, über CSS, mit dem HTML-Code aus dem ersten Schnipsel?

Answer 1

können Sie diesen Code verwenden:

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

Es fügt entkam   nach jedem ursprünglich leer td, Ihr Problem zu lösen.

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>

Erfahren Sie mehr über HTML-Entitäten zu entkommen here.

Answer 2

Sie height zu table-cell hinzufügen können, in diesem Fall wird es für andere Elemente wie min-height Eigenschaft arbeitet (mit display: block, display: inline-block, etc). Ich habe eine andere Tabellenzeile mit langen Text demonstrieren es:

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>

Sie nicht min-height Eigenschaft verwenden können, weil the specification sagt:

In CSS 2.1, die Wirkung von 'min-height' und 'max-height' für Tabellen, Inline-Tabellen, Tabellenzellen, Tabellenzeilen und Zeilengruppen sind nicht definiert.