这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
当前回答
你可以在桌子上做一些事情:
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
其他回答
执行上述操作。。。
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>
你可以在桌子上做一些事情:
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
我在与一个类似的问题作斗争时偶然发现了这一点。我发现Varun Natraaj的答案非常有用,但我会使用透明边框。
td { border: 1em solid transparent; }
透明边框仍具有宽度。
回答太晚了:)
如果将float应用于tr元素,则可以使用margin属性在两行之间设置空格。
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}