这是否可以通过CSS实现?

我在努力

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

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


当前回答

tr { 
    display: block;
    margin-bottom: 5px;
}

其他回答

执行上述操作。。。

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

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

您需要设置边界塌陷:分离;在桌子上;大多数浏览器默认样式表开始于边框折叠:折叠;,其沟道边界间隔。

此外,边框间距:取决于TD,而不是TR。

Try:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
tr { 
    display: block;
    margin-bottom: 5px;
}

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

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

查看边界塌陷:单独属性(默认)和边界间距属性。

首先,您必须使用边框折叠来分隔它们,然后可以使用边框间距来定义列和行之间的间距。

这两个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>