这可以通过CSS实现吗？
我正在尝试
tr.classname {
border-spacing: 5em;
}
无济于事。也许我做错了什么？
答案 0 :(得分：503)
您需要在td元素上使用填充。这样的事情应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。
在下面的CSS代码中，大于号表示填充仅应用于td元素，这些元素是具有类tr的{{1}}元素的直接子元素。这样就可以使用嵌套表。 （示例代码中的单元格C和D。）我不太确定浏览器对直接子选择器的支持（想想IE 6），但它不应该破坏任何现代浏览器中的代码。
spaceUnder/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}
这应该有点像这样：
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>答案 1 :(得分：357)
在父表中，尝试设置
border-collapse:separate;
border-spacing:5em;
加上边框声明，看看这是否达到了预期的效果。 但要注意，IE不支持“分离边界”模型。
答案 2 :(得分：176)
你的桌子上有任意数据的id专辑......我省略了trs和tds
<table id="albums" cellspacing="0">
</table>
在css中：
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
答案 3 :(得分：125)
因为我在桌子后面有一张背景图片，所以用白色填充物伪装它是行不通的。我选择在每行内容之间添加一个空行：
<tr class="spacer"><td></td></tr>
然后使用css为间隔行提供一定的高度和透明背景。
答案 4 :(得分：69)
From Mozilla Developer Network：
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甜蜜。还使用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>
答案 5 :(得分：53)
您可以尝试添加分隔符行：
HTML：
<tr class="separator" />
的CSS：
table tr.separator { height: 10px; }
答案 6 :(得分：47)
您无法更改表格单元格的边距。但是你可以改变填充。更改TD的填充，这将使单元格更大，并使用增加的填充将文本推离侧面。但是，如果你有边框线，它仍然不是你想要的。
答案 7 :(得分：20)
您需要在桌面上设置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>
答案 8 :(得分：19)
好的，你可以做到
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保在td而不是行上设置背景颜色。这应该适用于大多数浏览器......（Chrome，即＆amp; ff测试）
答案 9 :(得分：18)
您可以在表格中使用 line-height ：
<table style="width: 400px; line-height:50px;">
答案 10 :(得分：16)
查看border-collapse: separate属性（默认）和border-spacing属性。
首先，您必须分隔 border-collapse ，然后您可以使用定义列和行之间的空间边界。
每个浏览器see here实际上都支持这两种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>
答案 11 :(得分：13)
tr {
display: block;
margin-bottom: 5px;
}
答案 12 :(得分：11)
太晚的回答：）
如果将float应用于tr元素，则可以在具有margin属性的两行之间留出空格。
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
答案 13 :(得分：11)
要创建行间距的错觉，请将背景颜色应用于行，然后创建一个白色的粗边框，以便创建“空格”：）
tr
{
background-color: #FFD700;
border: 10px solid white;
}
答案 14 :(得分：9)
为表格提供间距的正确方法是使用cellpadding和cellspacing，例如
<table cellpadding="4">
答案 15 :(得分：9)
我在遇到类似问题时偶然发现了这一点。我发现Varun Natraaj的答案非常有用，但我会使用透明边框。
td { border: 1em solid transparent; }
透明边框仍有宽度。
答案 16 :(得分：6)
适用于2015年的大多数最新浏览器。简单的解决方案。它并不适用于透明，但与Thoronwen的答案不同，我无法通过任何尺寸进行渲染。
tr {
border-bottom:5em solid white;
}
答案 17 :(得分：3)
只需将div放在td中并设置以下div格式：
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
答案 18 :(得分：2)
最好的方法是添加带有 <td> 属性的 height：
<td height="50" colspan="2"></td>
您可以阅读有关 colspan here 的更多信息。
在下面的例子中，我们的表格是绿色，我们的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>答案 19 :(得分：2)
我意识到这是旧线程的答案，可能不是所要求的解决方案，但是虽然所有建议的解决方案都没有按照我的要求行事，但这个解决方案对我有用。
我有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;}
希望这有助于某人。
答案 20 :(得分：0)
或者只是在要添加间距
的行之间添加边距高度的空白答案 21 :(得分：0)
您可以填写＆lt; td /＆gt; ＆lt; div /＆gt;元素元素，并将任何边距应用于您喜欢的div。对于行之间的可视空间，您可以在＆lt; tr /＆gt;上使用重复的背景图像。元件。 （这是我今天刚刚使用的解决方案，它似乎适用于IE6和FireFox 3，但我没有进一步测试。）
此外，如果您不愿意修改服务器代码以将＆lt; div /＆gt; s放在＆lt; td /＆gt;内，您可以使用jQuery（或类似的东西）动态包装＆lt; td /＆GT; ＆lt; div /＆gt;中的内容，使您可以根据需要应用CSS。
答案 22 :(得分：0)
这是一个简单而优雅的解决方案，但有一些警告：
考虑到这一点，请尝试以下操作：
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版本，也可以轻松创建垂直（列）间隙而不是行间隙。
在这里是一个Codepen，您可以在其中查看它的运行情况：https://codepen.io/anon/pen/agqPpW
答案 23 :(得分：-1)
这里运作顺利：
#myOwnTable td { padding: 6px 0 6px 0;}
我想你可以通过指定哪个td来确定更精细的布局。
答案 24 :(得分：-5)
如上所示...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
删除垂直列对齐，因此请小心使用它
答案 25 :(得分：-16)
你试过了吗？
tr.classname { margin-bottom:5em; }
或者，每个td也可以调整：
td.classname { margin-bottom:5em; }
或
td.classname { padding-bottom:5em; }