这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

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

其他回答

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

td { border: 1em solid transparent; }

透明边框仍具有宽度。

您可以尝试添加分隔符行:

html格式:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

只需将div放在td中,并设置以下div样式:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

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

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

我意识到这是对一个旧线程的回答,可能不是所要求的解决方案,但尽管所有建议的解决方案都没有达到我所需要的效果,但这个解决方案对我有效。

我有两个表格单元格,一个带有背景色,另一个带有边框色。上述解决方案删除了边界,因此右侧的单元格看起来像漂浮在半空中。成功的解决方案是用div和相应的类替换table、tr和td:table将是div id=“table_replacer”,tr将是div class=“tr_replaceer”,td将是div class=“td_replacer“(显然也将结束标记更改为div)

为了解决我的问题,css是:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有所帮助。