如果所有单元格都为空，是否会显示表格行？答案

【问题标题】：Will a table row be displayed if all its cells are empty?如果所有单元格都为空，是否会显示表格行？
【发布时间】：2015-02-02 23:25:29
【问题描述】：

我有一个空表行，仅用于行之间的分隔。

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

它在 IE、FF、Opera 和 Safari 中呈现。问题是，我是应该在里面放一些内容还是可以保持原样？

喜欢：

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

【问题讨论】：

使用空行作为间距会破坏您的数据结构。您可能最好将各种数据块包装在 thead 或 tbody 元素中并设置它们的样式以实现间距。

标签： html html-table

【解决方案1】：

您可以将&nbsp; 作为列内容，以确保显示行。更好的方法是使用 CSS 来设置间距。

【讨论】：

CSS 不起作用。我还希望用背景颜色填充单元格，同时让分隔符保持白色。如果我将填充放在单元格上，填充区域也会被填充。我不想那样。

【解决方案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 元素会导致元素在顶部和底部获得水平边框，而元素获得左右边框）：

<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>

【讨论】：

【解决方案3】：

正如您在 W3Schools 的 this example 中看到的那样，使用 &nbsp; 是做您想做的事的最佳方式。

【讨论】：

1. w3fools, 2. 链接腐烂。除此之外，我并不反对&nbsp;-ing 表格单元格。

【解决方案4】：

如果你想在里面放内容，我会使用无中断空格：&nbsp;，而不是普通的空白

【讨论】：

【解决方案5】：

这是一个非常古老的问题，但如果有人仍然需要解决方案（display: table-cell 或 table-row elements 存在问题）

解决办法如下：

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

【讨论】：

【解决方案6】：

我想添加我的解决方案，这是对@Dariusz Sikorski 解决方案的修改。

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

【讨论】：

【解决方案7】：

您可能已经尝试过，但如果您尝试在行之间添加一些空格，您是否尝试过添加一些填充。

CELLSPACING=长度（单元格之间的间距）

CELLPADDING=长度（单元格内的间距）

卡尔

【讨论】：

【解决方案8】：

为确保显示空单元格，可以使用以下 CSS：

table { empty-cells:show; }

【讨论】：

【解决方案9】：

您可以使用多个tbody 标记对表格行进行分组。它完全有效且更具语义化。

【讨论】：