这是否可以通过CSS实现?

我在努力

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

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


当前回答

您是否尝试过:

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

或者,也可以调整每个td:

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

其他回答

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

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

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

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

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

行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现,即边框底部:纯白色5px;

下面是创建屏幕截图的代码:

<style>
table.class1 {
    text-align:center;
    border-spacing:0 0px;
    font-family:Calibri, sans-serif;
}

table.class1 tr:first-child {
    background-color:#F8F8F8; /* header row color */
}

table.class1 tr > td {
    /* firefox has a problem rounding the bottom corners if the entire row is colored */
    /* hence the color is applied to each cell */
    background-color:#BDE5F8;
}

table.class1 th {
    border:solid #A6A6A6 1px;
    border-bottom-width:0px; /* otherwise borders are doubled-up */
    border-right-width:0px;
    padding:5px;
}

table.class1 th:first-child {
    border-radius: 5px 0 0 0;
}

table.class1 th.last {
    border-right-width:1px;
    border-radius: 0 5px 0 0;
}

/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
    border-radius: 0 0 0 5px;
}

table.class1 tr:last-child > td:last-child {
    border-radius: 0 0 5px 0;
}

 /* put a line at the start of each new group */
td.newgroup {
    border-top:solid #AAA 1px;
}

/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
    border-bottom:solid white 5px;
}

</style>

<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>

您可以在表格中使用线条高度:

<table style="width: 400px; line-height:50px;">

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

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