这是否可以通过CSS实现?

我在努力

tr.classname {
  border-spacing: 5em;
}

但没有用。也许我做错了什么?


当前回答

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

其他回答

您可以在表格中使用线条高度:

<table style="width: 400px; line-height:50px;">

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

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

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

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

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

为表提供间距的正确方法是使用cellpadding和cellspacing,例如。

<table cellpadding="4">

在父表中,尝试设置

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

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