这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

<table cellpadding="4">

其他回答

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

td { border: 1em solid transparent; }

透明边框仍具有宽度。

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

<table cellpadding="4">
tr { 
    display: block;
    margin-bottom: 5px;
}

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

html格式:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

您需要在td元素上使用填充。像这样的东西应该会奏效。当然,您可以使用顶部填充而不是底部填充获得相同的结果。

在下面的CSS代码中,大于号表示填充仅应用于td元素,这些元素是带有spaceUnder类的tr元素的直接子元素。这将使使用嵌套表成为可能。(示例代码中的单元格C和D)我不太确定浏览器是否支持直接子选择器(想想IE 6),但它不应该破坏任何现代浏览器中的代码。

/*对类spaceUnder的tr元素的直接子级td元素应用填充*/tr.spaceUnder>td{衬垫底部:1毫米;}<表><tbody><tr><td>一个</td><td>B级</td></tr><tr class=“spaceUnder”><td>C类</td><td>D)</td></tr><tr><td>电子</td><td>F级</td></tr></tbody></table>

这应该有点像这样:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+