这是否可以通过CSS实现?

我在努力

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

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


当前回答

回答太晚了:)

如果将float应用于tr元素,则可以使用margin属性在两行之间设置空格。

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

其他回答

适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明,但与Thoronwen的答案不同,我无法获得任何大小的透明渲染。

    tr {
      border-bottom:5em solid white;
    }

为表提供间距的正确方法是使用cellpadding和cellspacing,例如。

<table cellpadding="4">

这里有一个简单而优雅的解决方案,并附带一些注意事项:

实际上,你不能使间隙透明,你需要给它们一种特定的颜色。您不能在间隙上方和下方将边框的角变圆您需要知道表格单元格的填充和边框

考虑到这一点,请尝试以下操作:

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

我在与一个类似的问题作斗争时偶然发现了这一点。我发现Varun Natraaj的答案非常有用,但我会使用透明边框。

td { border: 1em solid transparent; }

透明边框仍具有宽度。

您需要在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 |
+---+---+