Будет ли отображаться строка таблицы, если все ее ячейки пусты?

Question

У меня есть пустая строка таблицы только для разделения между строками.

<tr>
  <td colspan="5"></td>
</tr>

Отображается в IE, FF, Opera и Safari. Вопрос в том, должен ли я поместить в него какой-то контент или можно оставить все как есть?

Как:

<tr>
  <td colspan="5">&nbsp;</td>
</tr>

Answer 1

Ну, вы можете поместить   в качестве содержимого столбца, чтобы убедиться, что строки отображаются. Лучше всего использовать CSS для интервалов.

Answer 2

Семантически, пустой ряд служит цели, или это чисто для макета? Если последнее, возможно, стоит рассмотреть возможность удаления пустой строки и обеспечения разделения с помощью CSS. Э.Г.

<tr class="separate-below">
    <td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
    <td>Data after separater</td><td>More Data</td>...
</tr>

Со следующим в таблице стилей:

TR.separate-below TD,TR.separate-below TH {
    border-bottom: 1em solid white; /* use the background colour of a cell here */
}

Кроме того, вы можете использовать несколько элементов

для группировки блоков строк (добавление rules = "groups" к элементу таблицы приводит к тому, что элементы получают горизонтальную границу сверху и снизу, а элемент чтобы получить границу слева и справа):

<table rules="groups">
<thead>
    <tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
    <tr><td>Data</td><td>Data</td>...</tr>
    <tr><td>Data</td><td>Data</td>...</tr>
    ...
</tbody>
<tbody>
    <tr><td>Data</td><td>Data</td>...</tr>
    ...
</tbody>
...
</table>

Answer 3

Как вы можете видеть в этом примере от W3Schools, использование   - лучший способ сделать то, что вы хотите.

Answer 4

Я хотел добавить свое решение, которое является модификацией решения @Dariusz Sikorski.

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

Answer 5

Это очень старый вопрос, но если кому-то все еще нужно решение (проблема существует с display: table-cell или table-row elements)

вот решение:

.emptyElement:after{
  content: "\00a0";
}

Answer 6

если вы хотите поместить содержимое внутрь, я бы использовал неразрывный пробел:  , а не обычный пробел

Answer 7

Вы можете использовать несколько тегов tbody для группировки строк таблицы. Это полностью верно и более семантически.

Answer 8

Чтобы обеспечить отображение пустых ячеек, можно использовать следующий CSS:

table { empty-cells:show; }

Answer 9

Возможно, вы уже пробовали это, но если вы пытались добавить пробел между строками, вы пытались добавить отступы.

CELLSPACING = Длина (расстояние между ячейками)

CELLPADDING = Длина (интервал внутри ячеек)

Karl