这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过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>