Предотвращение краха пустых строк в таблице HTML через CSS

Ответ 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>

Ответ 2

Вы можете добавить height в table-cell, в этом случае он будет работать как 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>

Ответ 3

Попробуйте добавить в свою таблицу форматирование CSS, например,

        table.someclass tbody td {
              white-space:nowrap;
              min-width:30px;
              vertical-align:top;
        }

Это сделает все пустые ячейки равными и шириной не менее 30 пикселей.

Такие вещи, как  , nowrap и добавление CSS-контента, например, content: "\00a0";, не помогли мне.