表中两行之间的间距？

这是否可以通过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

2019-07-01 05:08:23

其他回答

因为我在桌子后面有一个背景图像，所以用白色填充来伪装是行不通的。我选择在每行内容之间放置一个空行：

<tr class="spacer"><td></td></tr>

然后使用css为间隔行提供一定的高度和透明背景。

2010-08-09 02:41:33

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

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

2015-09-16 20:52:21

.table {
 border-collapse: separate; 
 border-spacing: 0 1rem;
}

这很适合我在表格之间提供垂直边距/间距。参考：https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

2022-04-11 02:33:41

您需要设置边界塌陷：分离；在桌子上；大多数浏览器默认样式表开始于边框折叠：折叠；，其沟道边界间隔。

此外，边框间距：取决于TD，而不是TR。

Try:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

2012-08-27 17:18:00

您可以用＜div/＞元素填充＜td/＞元素，并对您喜欢的div应用任何边距。对于行之间的可视空间，可以在＜tr/＞元素上使用重复的背景图像。（这是我今天刚刚使用的解决方案，它似乎在IE6和FireFox 3中都有效，尽管我没有进一步测试它。）

此外，如果您不愿意修改服务器代码以将＜div/＞s放在＜td/＞s中，那么可以使用jQuery（或类似的东西）将＜td/〕内容动态地包装在＜div/〕中，使您能够根据需要应用CSS。

2008-12-31 01:04:10

表中两行之间的间距？

推荐文章

最新文章

标签