attribute - title html español

Evitar el colapso de filas vacías en la tabla HTML a través de CSS

Question

Tengo una tabla HTML de la siguiente manera:

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

Cuando ejecutes esto, verás que la segunda fila está colapsada, pero prefiero que se haya desplegado, con la misma altura que la primera fila. Una forma de hacer esto es poner un   entidad, de la siguiente manera:

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

¿Hay alguna manera de lograr el segundo resultado, a través de CSS, utilizando el HTML del primer fragmento?

Answer 1

Puede agregar height a la celda de la tabla, en este caso funcionará como la propiedad min-height para otros elementos (con display: block , display: inline-block , etc.). Agregué otra fila de la tabla con texto largo para demostrarlo:

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>

No puedes usar la propiedad min-height , porque la especificación dice:

En CSS 2.1, el efecto de ''min-height'' y ''max-height'' en tablas, tablas en línea, celdas de tablas, filas de tablas y grupos de filas no está definido.

Answer 2

Puedes usar este código:

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

Agrega escapado   después de cada td originalmente vacío, resolviendo su problema.

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>

Obtenga más información sobre cómo escapar de las entidades HTML here .