表中两行之间的空间？

小开

太迟的回答：）

如果将浮点数应用于tr元素，则可以在具有margin属性的两行之间设置间距。

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

小开

好的你可以的

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

确保背景颜色设置在td而不是行上。这应该适用于大多数浏览器…（Chrome，ie&ff测试）

小开

由于我在桌子后面有一个背景图像，用白色填充伪造它是行不通的。我选择在每一行内容之间放一个空行：

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

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

小开

你有表ID相册与任何数据…我已经省略了trs和tds

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

在css中：

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

小开

这样做上面显示…

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

删除垂直列对齐，因此请小心使用它

小开

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

小开

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

html：

<tr class="separator" />

css：

table tr.separator { height: 10px; }

小开

给出表的行间距的正确方法是使用cell填充和cell间距。

<table cellpadding="4">

小开

您需要在表中设置border-collapse: separate;；大多数浏览器默认样式表从border-collapse: collapse;开始，这会省略边框行间距。

此外，边框行间距：在TD上，而不是TR。

尝试：

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

小开

要创建行间距的错觉，请将背景颜色应用于行，然后创建带有白色的粗边框，以便创建“空间”：）

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

小开

我在处理类似问题时偶然发现了这个问题。我发现Varun Natraaj的回答很有帮助，但我会使用透明边框。

td { border: 1em solid transparent; }

透明边框仍然有宽度。

小开

我意识到这是对旧线程的回答，可能不是所要求的解决方案，但是虽然所有建议的解决方案都没有做我需要的，这个解决方案为我工作。

我有2个表格单元格，一个带有背景颜色，另一个带有边框颜色。上述解决方案删除了边框，因此右侧的单元格似乎漂浮在半空中。解决方法是用div和相应的类替换table、tr和td：table将是div id="table_replacer"，tr将是div class="tr_replacer"，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;}

希望这有助于某人。

小开

您可以在表中使用线宽：

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

小开

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

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

小开

来自Mozilla开发者网络：

边框行间距CSS属性指定相邻单元格的边框之间的距离（仅适用于分隔的边框模型）。这等效于表示超文本标记语言但是可选的第二个值可用于设置不同的水平和垂直行间距。中的cell间隔属性

最后一部分经常被监督。示例：

.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甜味。还使用tbody设置为第一行提供了更多的行间距。随意使用！

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

.spacing-table {font-family: 'Helvetica', 'Arial', sans-serif;font-size: 15px;border-collapse: separate;table-layout: fixed;width: 80%;border-spacing: 0 5px; /* this is the ultimate fix */}.spacing-table th {text-align: left;padding: 5px 15px;}.spacing-table td {border-width: 3px 0;width: 50%;border-color: darkred;border-style: solid;background-color: red;color: white;padding: 5px 15px;}.spacing-table td:first-child {border-left-width: 3px;border-radius: 5px 0 0 5px;}.spacing-table td:last-child {border-right-width: 3px;border-radius: 0 5px 5px 0;}.spacing-table thead {display: table;table-layout: fixed;width: 100%;}.spacing-table tbody {display: table;table-layout: fixed;width: 100%;border-spacing: 0 10px;}

<table class="spacing-table"><thead><tr><th>Lead singer</th><th>Band</th></tr></thead><tbody><tr><td>Bono</td><td>U2</td></tr></tbody><tbody><tr><td>Chris Martin</td><td>Coldplay</td></tr><tr><td>Mick Jagger</td><td>Rolling Stones</td></tr><tr><td>John Lennon</td><td>The Beatles</td></tr></tbody></table>

小开

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

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

小开

这里工作顺利：

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

我想你可以通过指定需要的td来计算出更细粒度的布局。

小开

看看边框崩溃：单独的属性（默认）和边行间距属性。

首先，你必须用边界崩溃来分离它们，然后你可以用边行间距来定义列和行之间的空间。

这两个CSS属性实际上在每个浏览器上都得到了很好的支持，在这里看到。

table     {border-collapse: separate;  border-spacing: 10px 20px;}
table,table td,table th  {border: 1px solid black;}

<table><tr><td>Some text - 1</td><td>Some text - 1</td></tr><tr><td>Some text - 2</td><td>Some text - 2</td></tr><tr><td>Some text - 3</td><td>Some text - 3</td></tr></table>

小开

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

你不能让缝隙透明，你需要给它们一个特定的颜色。
你不能把边框上的边角和缺口下的边角围起来
您需要知道表格单元格的填充和边框

考虑到这一点，试试这个：

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块，前面有一个间隙。这些块从单元格中伸出一点，以重叠现有的边框，隐藏它们。这些块只是夹在一起的顶部和底部边框：顶部边框形成间隙，底部边框重新创建单元格原始顶部边框的外观。

请注意，如果您在表格本身和单元格周围都有边框，则需要进一步增加“块”的水平-ve边距。因此，对于4px表格边框，您应该使用：

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

如果您的表使用border-collapse:separate而不是border-collapse: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

小开

最好的方法是添加<td>和height属性：

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

你可以阅读更多关于colspan这里。

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

<table style="background-color: green"><tr><td><span>Lorem</span></td><td><span>Ipsum</span></td></tr><tr><td height="50" colspan="2" style="background-color: yellow"></td></tr><tr><td><span>Sit</span></td><td><span>Amet</span></td></tr></table>

小开

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

小开

行间隙的外观可以通过在应该有下一个间隙的单元格上使用底部边框来实现，即border-bottom:solid white 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>

小开

现代解决方案涉及`display:grid`和`grid-gap`。

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

要添加空格之间行和列，可以使用grid-gap: [vertical] [horizontal]。

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

my-grid {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 10px 0px;}
my-item {border: 2px solid #c60965;background: #ffc000;color: #c60965;margin: -1px;  
font-size: 20px;display: flex;justify-content: center;align-items: center;
}

<my-grid><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></my-grid>

空间列之间以相同的方式实现。例如，列之间的20px空间和行之间的10px空间是使用以下语法完成的：grid-gap: 10px 20px;。

空间里面行/列是通过填充实现的。

微调演示

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

奖金：在底部，您可以找到为这种行为插入的代码（关于网格间隙、填充和边距破解）

<style>my-grid{display: grid; grid-template-columns: 1fr 1fr;}my-item{border: 2px solid #c60965; background: #ffc000; color: #c60965; margin: -1px; font-size: 20px; display: flex;}cus{font-family:Menlo; display:block; padding:7px; margin-top: 20px; border:3px dotted grey; border-radius:20px; font-size:14px;}set{display:flex; align-items:center;}dev-grid{display:grid; grid-template-columns: 1fr 1fr; margin:5px;}.hack{transform: scale(1.3); margin-top:13px; margin-left:5px;}txt:last-of-type{display:inline-block; margin-top:10px;}d{display:block; margin-top:10px; font-family: Menlo;}pre{padding:10px; background:rgb(246,246,246);}</style><my-grid> <my-item>Cell number one</my-item> <my-item>Cell number two</my-item> <my-item>Cell number three</my-item> <my-item>Cell number four</my-item> <my-item>Cell number five</my-item></my-grid><cus><dev-grid><txt>Space between rows:</txt><input type="range" min="0" max="20" value="0"><txt>Space between cols:</txt><input type="range" min="0" max="20" value="0"><txt>Padding (rows)</txt><input type="range" min="0" max="20" value="0"><txt>Padding (cols):</txt><input type="range" min="0" max="20" value="0"><txt>Margin hack:</txt><label> <input class="hack" type="checkbox" checked> <tt>on</tt></label></dev-grid></cus><d>Code to implement this:</d><pre></pre><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>var values=[0,0,0,0],hack=0,props={grid:{dis:"display:grid;",cols:"grid-template-columns: 1fr 1fr;"},item:{}};function drawProps(){grid_props=Object.values(props.grid).map(p=>`   ${p}`).join("\n"),item_props=Object.values(props.item).map(p=>`   ${p}`).join("\n"),all_code=`my-grid{\n${grid_props}\n}`,""!=item_props&&(all_code+=`\nmy-item{\n${item_props}\n}`),$("pre").text(all_code)}props.item.hack="margin: -1px;",drawProps(),$("input[type=range]").on("input",function(){ind=($(this).index()-1)/2,values[ind]=$(this).val(),$("my-grid").css("grid-gap",`${values[0]}px ${values[1]}px`),$("my-item").css("padding",`${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px`),code_grid=`grid-gap: ${values[0]}px ${values[1]}px;`,values[0]==values[1]&&(code_grid=`grid-gap: ${values[0]}px;`,0==values[0]&&(code_grid="")),code_padding=`padding: ${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px;`,values[2]==values[3]&&(code_padding=`padding: ${values[2]}px;`,0==values[2]&&(code_padding="")),props.grid.gap=code_grid,props.item.padding=code_padding,""==props.grid.gap&&delete props.grid.gap,""==props.item.padding&&delete props.item.padding,drawProps()}),$(".hack").change(function(){hack=$(this).is(":checked"),st=hack?"on":"off",$("tt").text(st),hack?(props.item.hack="margin: -1px;",$("my-item").css("margin","-1px")):(props.item.hack&&delete props.item.hack,$("my-item").css("margin","0px")),drawProps()});</script>

小开

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

这对我来说很好，可以在表之间提供垂直边距/行间距。参考：https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

小开

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

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

表选择性：因为它会选择所有表，所以如果你想选择单个表，你也可以这样做

<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

表中两行之间的空间？

现代解决方案涉及display:grid和grid-gap。

微调演示

现代解决方案涉及`display:grid`和`grid-gap`。