这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

td { border: 1em solid transparent; }

透明边框仍具有宽度。

其他回答

不能更改表格单元格的边距。但你可以更换衬垫。更改TD的填充,这将使单元格变大,并通过增加的填充将文本推离侧面。然而,如果你有边界线,它仍然不是你想要的。

您是否尝试过:

tr.classname { margin-bottom:5em; }

或者,也可以调整每个td:

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

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

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

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

html格式:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

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

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