表中两行之间的间距？

这是否可以通过CSS实现？

我在努力

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

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

当前回答

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

此外，边框间距：取决于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

其他回答

好的，你可以

tr.classname td {background-color:red; border-bottom: 5em solid white}

确保背景色设置在td而不是行上。这应该适用于大多数浏览器。。。（铬，即已测试）

2010-06-22 08:13:34

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

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

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

2010-08-09 02:41:33

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

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

考虑到这一点，请尝试以下操作：

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

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

此外，边框间距：取决于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

涉及显示的现代解决方案：带网格间隙的网格。

创建表格的现代解决方案是使用CSS网格或flexbox。

要在行和列之间添加空间，可以使用网格间距：[垂直][水平]。

为了防止网格间隙为零的“过厚/双边框”，可以在单元格样式中添加边距：-1px。值得注意的是：只有当你的边界和网格间隙都为零时，你才需要这个黑客。

我的网格{显示：栅格；网格模板列：1fr 1fr；栅隙：10px 0px；}我的项目{边框：2px实心#c60965；背景：#ffc000；颜色：#c60965；边距：-1px；字体大小：20px；显示：柔性；对齐内容：中心；对齐项目：居中；}<我的网格><my item>1</my item><my item>2</my item><my item>3</my item><my item>4</my item><my item>5</my item></我的网格>

柱之间的间距以相同的方式实现。例如，列之间的20px空间和行之间的10px空间使用以下语法完成：gridgap:10px 20px；。

行/列内的空间通过填充实现。

可调整演示

下面是一个交互式演示，您可以在其中调整网格间隙、填充和打开/关闭边距黑客，以查看更改。

另外：在底部，您可以找到为这种行为插入什么代码（关于网格间隙、填充和边距黑客）

2022-04-09 13:12:12

表中两行之间的间距？

推荐文章

最新文章

标签