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

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

表｛边框折叠：单独；边框间距：0 1em；｝

最好的方法是使用高度属性添加＜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>

适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明，但与Thoronwen的答案不同，我无法获得任何大小的透明渲染。

    tr {
      border-bottom:5em solid white;
    }

您有一个包含id相册的表，其中包含任何数据。。。我省略了trs和tds

<table id="albums" cellspacing="0">       
</table>

在css中：

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

tr { 
    display: block;
    margin-bottom: 5px;
}