这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
当前回答
适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明,但与Thoronwen的答案不同,我无法获得任何大小的透明渲染。
tr {
border-bottom:5em solid white;
}
其他回答
您有一个包含id相册的表,其中包含任何数据。。。我省略了trs和tds
<table id="albums" cellspacing="0">
</table>
在css中:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
要创建行间距的错觉,请将背景色应用于行,然后使用白色创建厚边框,以便创建“空间”:)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
在这里,这项工作很顺利:
#myOwnTable td { padding: 6px 0 6px 0;}
我想,如果需要的话,您可以通过指定哪个td来实现更细粒度的布局。
这里有一个简单而优雅的解决方案,并附带一些注意事项:
实际上,你不能使间隙透明,你需要给它们一种特定的颜色。您不能在间隙上方和下方将边框的角变圆您需要知道表格单元格的填充和边框
考虑到这一点,请尝试以下操作:
td {padding:5px 8px;border:2px solid blue;background:#E0E0E0} /* lets say the cells all have this padding and border, and the gaps should be white */
tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
content:"";
display:block;
position:relative;
z-index:1;
width:auto;
height:0;
padding:0;
margin:-5px -10px 5px; /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
border-top:16px solid white; /* the size & color of the gap you want */
border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}
实际上,您要做的是将一个矩形::before块粘贴到行中所有单元格的顶部,前面有一个空格。这些块从单元格中伸出一点,与现有边界重叠,从而隐藏它们。这些块只是夹在一起的顶部和底部边界:顶部边界形成了间隙,底部边界重新创建了单元格原始顶部边界的外观。
请注意,如果表本身和单元格周围都有边框,则需要进一步增加“块”的水平边距。因此,对于4px表格边框,您可以使用:
margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */
如果您的表使用border collapse:separate而不是border collash:collapse,则需要(a)使用整个表边框宽度:
margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */
…以及(b)替换现在需要出现在间隙下方的双倍宽度的边框:
border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */
如果您愿意,该技术很容易适应.gapafter版本,或者创建垂直(列)间隙而不是行间隙。
这里有一个代码笔,您可以在其中看到它的实际操作:https://codepen.io/anon/pen/agqPpW
最好的方法是使用高度属性添加<td>:
<td height="50" colspan="2"></td>
你可以在这里阅读更多关于colspan的信息。
在下面的示例中,我们的表是绿色的,具有高度属性的td是黄色的:
<table style=“background color:green”><tr><td><span>洛雷姆</span></td><td><span>Ipsum公司</span></td></tr><tr><td height=“50”colspan=“2”style=“background color:yellow”></td></tr><tr><td><span>坐下</span></td><td><span>阿梅特</span></td></tr></table>