Предотвратить крах пустых строк в HTML-таблицы с помощью CSS

Question

У меня есть таблица HTML следующим образом:

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

При запуске этого вы увидите второй ряд свернут, но я скорее всего, он был отброшен, с той же высотой, что и первая строка. Один из способов сделать это, чтобы положить   сущность следующим образом:

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

Есть ли способ, что я могу достигнуть второго результата, с помощью CSS, с помощью HTML с первого фрагмента?

Answer 1

Вы можете использовать этот код:

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

Он добавляет сбежал  после каждого первоначально пустой td, решая проблему.

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>

Узнайте больше о побеге HTML сущности here.

Answer 2

Вы можете добавить height в таблицу-клетки, в этом случае она будет работать как min-height собственность для других элементов (с display: block, display: inline-block и т.д.). Я добавил еще одну строку таблицы с длинным текстом, чтобы продемонстрировать это:

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>

Вы не можете использовать min-height свойство, потому что the specification говорит:

В CSS 2.1, эффект «min-height» и «max-height» для таблиц, встроенных таблиц, ячеек таблицы, строк таблицы и групп строк не определены.