这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

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

其他回答

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

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

我在与一个类似的问题作斗争时偶然发现了这一点。我发现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>

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

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

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