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

创建表格的现代解决方案是使用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（）｝）</脚本>

最好的方法是使用高度属性添加＜td＞：

<td height="50" colspan="2"></td>

你可以在这里阅读更多关于colspan的信息。

在下面的示例中，我们的表是绿色的，具有高度属性的td是黄色的：

<table style=“background color:green”><tr><td><span>洛雷姆</span></td><td><span>Ipsum公司</span></td></tr><tr><td height=“50”colspan=“2”style=“background color:yellow”></td></tr><tr><td><span>坐下</span></td><td><span>阿梅特</span></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 |
+---+---+

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

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

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

您可以用＜div/＞元素填充＜td/＞元素，并对您喜欢的div应用任何边距。对于行之间的可视空间，可以在＜tr/＞元素上使用重复的背景图像。（这是我今天刚刚使用的解决方案，它似乎在IE6和FireFox 3中都有效，尽管我没有进一步测试它。）

此外，如果您不愿意修改服务器代码以将＜div/＞s放在＜td/＞s中，那么可以使用jQuery（或类似的东西）将＜td/〕内容动态地包装在＜div/〕中，使您能够根据需要应用CSS。