这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

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

在css中:

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

其他回答

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

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

在父表中,尝试设置

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

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

我在与一个类似的问题作斗争时偶然发现了这一点。我发现Varun Natraaj的答案非常有用,但我会使用透明边框。

td { border: 1em solid transparent; }

透明边框仍具有宽度。

查看边界塌陷:单独属性(默认)和边界间距属性。

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

这两个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; }