回答太晚了：）

如果将float应用于tr元素，则可以使用margin属性在两行之间设置空格。

table tr{
float: left
width: 100%;
}

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

涉及显示的现代解决方案：带网格间隙的网格。

创建表格的现代解决方案是使用CSS网格或flexbox。

要在行和列之间添加空间，可以使用网格间距：[垂直][水平]。

为了防止网格间隙为零的“过厚/双边框”，可以在单元格样式中添加边距：-1px。值得注意的是：只有当你的边界和网格间隙都为零时，你才需要这个黑客。

我的网格{显示：栅格；网格模板列：1fr 1fr；栅隙：10px 0px；}我的项目{边框：2px实心#c60965；背景：#ffc000；颜色：#c60965；边距：-1px；字体大小：20px；显示：柔性；对齐内容：中心；对齐项目：居中；}<我的网格><my item>1</my item><my item>2</my item><my item>3</my item><my item>4</my item><my item>5</my item></我的网格>

柱之间的间距以相同的方式实现。例如，列之间的20px空间和行之间的10px空间使用以下语法完成：gridgap:10px 20px；。

行/列内的空间通过填充实现。

可调整演示

下面是一个交互式演示，您可以在其中调整网格间隙、填充和打开/关闭边距黑客，以查看更改。

另外：在底部，您可以找到为这种行为插入什么代码（关于网格间隙、填充和边距黑客）

<style>我的网格｛display：grid；网格模板列：1fr 1fr；｝我的项目｛border:2px纯色#c60965；背景：#ffc000；颜色：#c6096；边距：-1px；字体大小：20px；显示：flex；｝cus｛font-family:Menlo；显示：block；填充：7px；页边空白：20px，边框：3px灰色虚线；边框半径：20px、字体大小：14px；｝集合｛display；flex；对齐项目：center；｝开发网格｛display:grid；网格模板列：1fr 1fr；margin:5px；｝.ack｛transform:scale（1.3）；margin-top:13px；margin-left:5px；｝txt：最后一种类型｛dispatch:inline-block；margin-top:10px；｝d｛display：block；margin-op:10px；字体系列：Menlo；｝pre｛padding:10px；background:rgb（246246246）；｝</style>＜我的网格＞＜我的项目＞单元格编号1＜/我的项目＜我的项＞单元格编号2＜/我项目＞三</my item><my item>单元格编号四</my item><my item>单元编号五</my item>></my grid><cus><dev grid><txt>行间距：</txt><input-type=“range”min=“0”max=“20”value=“0“><txt>列间距：</txt><input type=“range“min=”0“max=”20“value=”0填充（列）：</txt><input type=“range”min=“0”max=“20”value=“0”><txt>保证金破解：</txt><label><input class=“hack”type=“checkbox”checked><tt>on</tt></label></dev-grid></cus><d>实现此功能的代码：</d><pre></pre><script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><script>var values=[0,0,0]，hack=0，props=｛grid:｛dis:”display：grid；“，cols:”grid template columns:1fr 1fr；“｝，item:｛｝｝；function drawProps（）｛grid_props=Object.values（props.grid）.map（p=>`${p｝`）.join（”\n“），item_props＝Object.value（props.item）.maap（p=>`${p｝'）.joit（”\n），all_code=`my grid｛grid \n｝`，“”！=item_props&&（all_code+=`\n我的项目｛\n$｛item_props｝\n｝），$（“pre”）.text（all_code）}props.item.ack=“margin:-1px；”，drawProps（），$（“input[type=range]”）.on（“input”，function（）{ind=（$（this）.index（）-1）/2，values[ind]=$（this）.val（），$[（“我的网格”）.css（“网格间隙”，`${values[0]｝px${values[1]｝px `），$“我的项目”）.css（“填充”，`${values[2]｝px${values[3]｝px px${values[3]｝px `），code_grid=`网格间隙：${values[0]｝px${values[1]｝px；`，values[0]==values[1]&&（code_grid=`网格间隙：${values[0]｝px；`，0==values[0]&&（code_grid=“”）），code_padding=`填充：${values[2]｝px${values[3]｝px${values[2]｝像素${value[3]｝像素；`，values[2]==values[3]&&（code_padding=`padding:${values[2]｝px；`，0==values[2][（code-padding=“”）），props.grid.gap=code_grid，props.item.padding=code_padding，“”==props.grid.gap&&delete props.grid.cap，“”=props.item.badding&&delete props.item.padding，drawProps（）}），$（“.ack”）.change（function（）｛hack=$（this）.is（“：checked”），st=hack？“on”：“off”，$（“tt”）.text（st），hack？（props.item.hack=“margin:-1px；”，$“my item”）.css（“margin”，“-1px”）：（props.item.hack&&delete props.item.ack，$（”my item“）.css”margin:0px“），drawProps（）｝）</脚本>

要创建行间距的错觉，请将背景色应用于行，然后使用白色创建厚边框，以便创建“空间”：）

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

在父表中，尝试设置

border-collapse: separate; 
border-spacing: 5em;

再加上一份边境声明，看看这是否达到你想要的效果。不过，请注意，IE不支持“分隔边界”模式。

回答太晚了：）

如果将float应用于tr元素，则可以使用margin属性在两行之间设置空格。

table tr{
float: left
width: 100%;
}

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

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

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

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