这可以通过 CSS 实现吗？
我在努力
tr.classname {
border-spacing: 5em;
}
无济于事。也许我做错了什么？
【问题讨论】：
|
可能是因为
border-spacing 是与table 相关的属性，而不是tr。试试table.classname {border-spacing:5em}。 Note: 如果指定了 !DOCTYPE，IE8 支持边框间距属性。
我在没有边框时使用 line-height。
|
您需要在 td 元素上使用填充。像这样的东西应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。
在下面的 CSS 代码中，大于号表示填充仅适用于 td 元素，这些元素是类为 spaceUnder 的 tr 元素的直接子元素。这将使使用嵌套表成为可能。 （示例代码中的单元格 C 和 D。）我不太确定浏览器是否支持直接子选择器（想想 IE 6），但它不应该破坏任何现代浏览器中的代码。
/* 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>这应该有点像这样：
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
【讨论】：
border-bottom 属性。那可能只会使用 1px 边框正确渲染。另一个但不那么优雅的解决方案是使用空行。
bottom-border 设置为透明也可能有效，但我不确定它的跨浏览器兼容性如何。
在父表中，尝试设置
border-collapse:separate;
border-spacing:5em;
加上一个边框声明，看看是否达到你想要的效果。 但请注意，IE 不支持“分离边框”模型。
【讨论】：
thead 和 tbody，它将在 Chrome 中呈现两个 border-spacing（但在 Firefox 中只有一个）。
border-spacing: 0 1em 以获取仅行之间的间距。
你有一个带有任何数据的 id 专辑的表...我省略了 trs 和 tds
<table id="albums" cellspacing="0">
</table>
在css中：
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
【讨论】：
因为我在桌子后面有一个背景图片，所以用白色填充来伪装它是行不通的。我选择在每行内容之间放置一个空行：
<tr class="spacer"><td></td></tr>
然后使用 css 给间隔行指定高度和透明背景。
【讨论】：
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>【讨论】：
您可以尝试添加分隔行：
html:
<tr class="separator" />
css:
table tr.separator { height: 10px; }
【讨论】：
并将 p-tag 的可见性设置为隐藏.. 也可以。 :-)
您不能更改表格单元格的边距。但是您可以更改填充。更改 TD 的填充，这将使单元格变大，并将文本从增加的填充的一侧推开。但是，如果您有边界线，它仍然不是您想要的。
【讨论】：
border-bottom 和padding-bottom 表示边框将低于padding。
查看border-collapse: separate 属性（默认）和border-spacing 属性。
首先，你必须用border-collapse分隔它们，然后你可以用定义列和行之间的空间边框间距 .
这两个 CSS 属性实际上在每个浏览器上都得到了很好的支持，see here。
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>【讨论】：
好的，可以的
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保背景颜色设置在 td 而不是行上。这应该适用于大多数浏览器...（Chrome，即 & ff 测试）
【讨论】：
需要在桌子上设置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>
【讨论】：
您可以在表格中使用line-height：
<table style="width: 400px; line-height:50px;">
【讨论】：
tr {
display: block;
margin-bottom: 5px;
}
【讨论】：
回答太晚了:)
如果将浮点数应用于tr 元素，则可以使用margin 属性在两行之间留出空间。
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
【讨论】：
display 属性设置为block。这允许该行有一个边距。垂直边距“Applies to: all elements except those with table display types other than table-caption, table, and inline-table”。由于table-row 不是这些例外中的任何一个，因此它不算在内。你可以通过tr {display:block;} 达到同样的效果，但我会警惕在复杂的表格中使用这些方法中的任何一种。它可能不会达到您的预期。
为了创造行间距的错觉，将背景颜色应用于行，然后用白色创建一个粗边框，以便创建一个“空间”:)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
【讨论】：
我在解决类似问题时偶然发现了这一点。我发现 Varun Natraaj 的回答很有帮助，但我会改用透明边框。
td { border: 1em solid transparent; }
透明边框仍然有宽度。
【讨论】：
为表格指定间距的正确方法是使用 cellpadding 和 cellspacing，例如
<table cellpadding="4">
【讨论】：
适用于 2015 年最新的浏览器。简单的解决方案。它不适用于透明，但与 Thoronwen 的回答不同，我无法以任何尺寸呈现透明。
tr {
border-bottom:5em solid white;
}
【讨论】：
只需将div 放在td 内，并设置div 的以下样式：
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
【讨论】：
最好的方法是添加带有height 属性的<td>：
<td height="50" colspan="2"></td>
你可以阅读更多关于colspanhere的信息。
在下面的例子中，我们的table是green，我们的td带有height属性是yellow：
<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; }
【讨论】：
我意识到这是对旧线程的回答，可能不是所要求的解决方案，但虽然所有建议的解决方案都没有满足我的需求，但这个解决方案对我有用。
我有 2 个表格单元格，一个带有背景颜色，另一个带有边框颜色。上述解决方案删除了边框，因此右侧的单元格似乎漂浮在半空中。
解决问题的解决方案是将table、tr 和td 替换为div 和相应的类：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;}
希望这对某人有所帮助。
【讨论】：
您可以用
元素填充另外，如果您不愿意修改服务器代码以将
s 放入【讨论】：
这是一个简单而优雅的解决方案，但有一些注意事项：
考虑到这一点，试试这个：
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
【讨论】：
行间隙的外观可以通过在应该有下一个间隙的单元格上使用底部边框来实现，即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>
【讨论】：
这里运行顺利：
#myOwnTable td { padding: 6px 0 6px 0;}
如果需要，我想你可以通过指定哪个 td 来制定更细粒度的布局。
【讨论】：
如上所示执行此操作...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
删除垂直列对齐，所以要小心你如何使用它
【讨论】：
你试过了吗：
tr.classname { margin-bottom:5em; }
另外，每个 td 也可以调整：
td.classname { margin-bottom:5em; }
或
td.classname { padding-bottom:5em; }
【讨论】：
div.el { display: table-row; margin: 10px; }，margin 没有任何作用。我知道它与实际的桌子有点不同，但它不应该......