这是否可以通过CSS实现?

我在努力

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

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


当前回答

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

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

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

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

其他回答

回答太晚了:)

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

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

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

为表提供间距的正确方法是使用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

要创建行间距的错觉,请将背景色应用于行,然后使用白色创建厚边框,以便创建“空间”:)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

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

td { border: 1em solid transparent; }

透明边框仍具有宽度。