这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
当前回答
tr {
display: block;
margin-bottom: 5px;
}
其他回答
不能更改表格单元格的边距。但你可以更换衬垫。更改TD的填充,这将使单元格变大,并通过增加的填充将文本推离侧面。然而,如果你有边界线,它仍然不是你想要的。
您是否尝试过:
tr.classname { margin-bottom:5em; }
或者,也可以调整每个td:
td.classname { margin-bottom:5em; }
or
td.classname { padding-bottom:5em; }
适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明,但与Thoronwen的答案不同,我无法获得任何大小的透明渲染。
tr {
border-bottom:5em solid white;
}
您需要在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 |
+---+---+
您有一个包含id相册的表,其中包含任何数据。。。我省略了trs和tds
<table id="albums" cellspacing="0">
</table>
在css中:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}