这是否可以通过CSS实现?

我在努力

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

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


当前回答

执行上述操作。。。

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

删除垂直列对齐方式,因此使用时要小心

其他回答

在这里,这项工作很顺利:

#myOwnTable td { padding: 6px 0 6px 0;}

我想,如果需要的话,您可以通过指定哪个td来实现更细粒度的布局。

在父表中,尝试设置

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

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

你可以在桌子上做一些事情:

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

table selected:因为它将选择所有表,所以如果您想选择单个表,也可以这样做

<table class="res">

</table>

对于上面的html,您可以这样做,请注意,对于特定的表,如果需要,可以使用下面的方法。

.res {
      border-collapse: separate;
      border-spacing: 0 15px;
    }

参考:https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

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

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

您需要在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 |
+---+---+