表中两行之间的间距？

这是否可以通过CSS实现？

我在努力

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

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

在父表中，尝试设置

border-collapse: separate; 
border-spacing: 5em;

再加上一份边境声明，看看这是否达到你想要的效果。不过，请注意，IE不支持“分隔边界”模式。

2008-12-08 21:52:43

您是否尝试过：

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

或者，也可以调整每个td：

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

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

2008-12-08 21:53:13

不能更改表格单元格的边距。但你可以更换衬垫。更改TD的填充，这将使单元格变大，并通过增加的填充将文本推离侧面。然而，如果你有边界线，它仍然不是你想要的。

2008-12-08 21:59:45

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

2008-12-10 17:18:55

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

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

2008-12-31 01:04:10

回答太晚了：）

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

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

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

2010-01-26 16:42:53

好的，你可以

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

您有一个包含id相册的表，其中包含任何数据。。。我省略了trs和tds

<table id="albums" cellspacing="0">       
</table>

在css中：

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

2010-10-20 13:49:47

执行上述操作。。。

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }

删除垂直列对齐方式，因此使用时要小心

2011-01-08 17:30:54

tr { 
    display: block;
    margin-bottom: 5px;
}

2011-01-26 15:17:36

您可以尝试添加分隔符行：

html格式：

<tr class="separator" />

css:

table tr.separator { height: 10px; }

2011-08-23 19:44:00

为表提供间距的正确方法是使用cellpadding和cellspacing，例如。

<table cellpadding="4">

2012-04-24 10:33:22

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

此外，边框间距：取决于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 
{
   background-color: #FFD700;
   border: 10px solid white;
}

2013-09-27 15:41:12

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

td { border: 1em solid transparent; }

透明边框仍具有宽度。

2014-02-17 12:23:15

我意识到这是对一个旧线程的回答，可能不是所要求的解决方案，但尽管所有建议的解决方案都没有达到我所需要的效果，但这个解决方案对我有效。

我有两个表格单元格，一个带有背景色，另一个带有边框色。上述解决方案删除了边界，因此右侧的单元格看起来像漂浮在半空中。成功的解决方案是用div和相应的类替换table、tr和td：table将是div id=“table_replacer”，tr将是div class=“tr_replaceer”，td将是div class=“td_replacer“（显然也将结束标记更改为div）

为了解决我的问题，css是：

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有所帮助。

2014-05-21 13:37:45

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

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

2014-06-12 02:56:30

只需将div放在td中，并设置以下div样式：

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

2014-06-23 07:45:21

来自Mozilla开发者网络：

border-spacing CSS属性指定相邻单元格边界之间的距离（仅适用于分隔边界模型）。这相当于表示HTML中的cellspacing属性，但可以使用可选的第二个值来设置不同的水平和垂直间距。

这最后一部分经常受到监督。例子：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

我现在明白了OP希望特定的、单独的行具有增加的间距。我添加了一个带有tbody元素的设置，它可以在不破坏语义的情况下实现这一点。然而，我不确定是否所有浏览器都支持它。我是用Chrome制作的。

下面的例子是为了展示如何让它看起来像是一个单独的表格，充满了css的甜蜜。也给了第一排更多的空间与车身设置。请随意使用！

支持通知：IE8+、Chrome、Firefox、Safari、Opera 4+

.间距表{字体系列：'Helvetica'，'Arial'，无衬线；字体大小：15px；边界塌陷：分离；表格布局：固定；宽度：80%；边框间距：0 5px；/*这是最终的解决方案*/}.间距表th{文本对齐：左侧；填充：5px 15px；}.间距表td{边框宽度：3px 0；宽度：50%；边框颜色：深红色；边框样式：实心；背景色：红色；颜色：白色；填充：5px 15px；}.间距表td:第一个子项{边框左侧宽度：3px；边界半径：5px 0 0 5px；}.space table td:最后一个子级{边框右侧宽度：3px；边界半径：0 5px 5px 0；}.间距表thead{显示：表格；表格布局：固定；宽度：100%；}.间距表tbody{显示：表格；表格布局：固定；宽度：100%；边框间距：0 10px；}<table class=“spacing table”><thead><tr>主唱</th><th>波段</th></tr></thead><tbody><tr><td>博诺牌手表</td><td>U2型</td></tr></tbody><tbody><tr><td>克里斯·马丁</td><td>酷玩</td></tr><tr><td>米克·贾格尔</td><td>滚石乐队</td></tr><tr><td>约翰·列侬</td><td>披头士乐队</td></tr></tbody></table>

2015-02-27 13:57:10

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

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

2015-09-16 20:52:21

在这里，这项工作很顺利：

#myOwnTable td { padding: 6px 0 6px 0;}

我想，如果需要的话，您可以通过指定哪个td来实现更细粒度的布局。

2016-06-12 08:48:17

查看边界塌陷：单独属性（默认）和边界间距属性。

首先，您必须使用边框折叠来分隔它们，然后可以使用边框间距来定义列和行之间的间距。

这两个CSS财产实际上在每个浏览器上都得到了很好的支持，请参阅此处。

表｛边框折叠：单独；边框间距：10px 20px；｝桌子表td，表th｛border:1px实心黑色；｝<表><tr><td>部分文本-1</td><td>部分文本-1</td></tr><tr><td>部分文本-2</td><td>部分文本-2</td></tr><tr><td>部分文本-3</td><td>部分文本-3</td></tr></table>

2017-12-20 14:04:32

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

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

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

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＞：

<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

表｛边框折叠：单独；边框间距：0 1em；｝

2021-11-24 17:56:03

行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现，即边框底部：纯白色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>

2021-12-29 03:46:24

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

创建表格的现代解决方案是使用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

.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

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

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

表中两行之间的间距？

推荐文章

最新文章

标签