表中两行之间的间距？

这是否可以通过CSS实现？

我在努力

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

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

当前回答

回答太晚了：）

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

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

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

2010-01-26 16:42:53

其他回答

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

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

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

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

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

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

2015-09-16 20:52:21

你可以在桌子上做一些事情：

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

table selected：因为它将选择所有表，所以如果您想选择单个表，也可以这样做

<table class="res">

</table>

对于上面的html，您可以这样做，请注意，对于特定的表，如果需要，可以使用下面的方法。

.res {
      border-collapse: separate;
      border-spacing: 0 15px;
    }

参考：https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

2022-07-14 05:27:03

最好的方法是使用高度属性添加＜td＞：

<td height="50" colspan="2"></td>

你可以在这里阅读更多关于colspan的信息。

在下面的示例中，我们的表是绿色的，具有高度属性的td是黄色的：

<table style=“background color:green”><tr><td><span>洛雷姆</span></td><td><span>Ipsum公司</span></td></tr><tr><td height=“50”colspan=“2”style=“background color:yellow”></td></tr><tr><td><span>坐下</span></td><td><span>阿梅特</span></td></tr></table>

2021-02-05 14:45:14

表中两行之间的间距？

推荐文章

最新文章

标签