查看边界塌陷：单独属性（默认）和边界间距属性。

首先，您必须使用边框折叠来分隔它们，然后可以使用边框间距来定义列和行之间的间距。

这两个CSS财产实际上在每个浏览器上都得到了很好的支持，请参阅此处。

表｛边框折叠：单独；边框间距：10px 20px；｝桌子表td，表th｛border:1px实心黑色；｝<表><tr><td>部分文本-1</td><td>部分文本-1</td></tr><tr><td>部分文本-2</td><td>部分文本-2</td></tr><tr><td>部分文本-3</td><td>部分文本-3</td></tr></table>

您是否尝试过：

tr.classname { margin-bottom:5em; }

或者，也可以调整每个td：

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

您需要在td元素上使用填充。像这样的东西应该会奏效。当然，您可以使用顶部填充而不是底部填充获得相同的结果。

在下面的CSS代码中，大于号表示填充仅应用于td元素，这些元素是带有spaceUnder类的tr元素的直接子元素。这将使使用嵌套表成为可能。（示例代码中的单元格C和D）我不太确定浏览器是否支持直接子选择器（想想IE 6），但它不应该破坏任何现代浏览器中的代码。

/*对类spaceUnder的tr元素的直接子级td元素应用填充*/tr.spaceUnder>td{衬垫底部：1毫米；}<表><tbody><tr><td>一个</td><td>B级</td></tr><tr class=“spaceUnder”><td>C类</td><td>D）</td></tr><tr><td>电子</td><td>F级</td></tr></tbody></table>

这应该有点像这样：

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

这里有一个简单而优雅的解决方案，并附带一些注意事项：

实际上，你不能使间隙透明，你需要给它们一种特定的颜色。您不能在间隙上方和下方将边框的角变圆您需要知道表格单元格的填充和边框

考虑到这一点，请尝试以下操作：

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

实际上，您要做的是将一个矩形：：before块粘贴到行中所有单元格的顶部，前面有一个空格。这些块从单元格中伸出一点，与现有边界重叠，从而隐藏它们。这些块只是夹在一起的顶部和底部边界：顶部边界形成了间隙，底部边界重新创建了单元格原始顶部边界的外观。

请注意，如果表本身和单元格周围都有边框，则需要进一步增加“块”的水平边距。因此，对于4px表格边框，您可以使用：

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

如果您的表使用border collapse：separate而不是border collash：collapse，则需要（a）使用整个表边框宽度：

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

…以及（b）替换现在需要出现在间隙下方的双倍宽度的边框：

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

如果您愿意，该技术很容易适应.gapafter版本，或者创建垂直（列）间隙而不是行间隙。

这里有一个代码笔，您可以在其中看到它的实际操作：https://codepen.io/anon/pen/agqPpW

因为我在桌子后面有一个背景图像，所以用白色填充来伪装是行不通的。我选择在每行内容之间放置一个空行：

<tr class="spacer"><td></td></tr>

然后使用css为间隔行提供一定的高度和透明背景。

.table {
 border-collapse: separate; 
 border-spacing: 0 1rem;
}

这很适合我在表格之间提供垂直边距/间距。参考：https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html