通过CSS可以做到吗？
我正在努力
tr.classname {
border-spacing: 5em;
}
无济于事。也许我做错了什么？
表格中两行之间的空格？
第1742篇《表格中两行之间的空格？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共20个回答
Here this works smoothly:
#myOwnTable td { padding: 6px 0 6px 0;}
I suppose you could work out a more finely-grained layout by specifying which td if need be.
doing this shown above...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
removes vertical column alignment so be careful how you use it
Simply put div inside the td and set the following styles of div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
Or just add a blank with the height of the margin in between the rows you would like to add the spacing
I realize this is an answer to an old thread and may not be the solution requested, but while all the suggested solutions did not do what I needed, this solution worked for me.
I had 2 table cells, one with background color, the other with a border color. The above solutions remove the border, so the cell on the right would appear to be floating in mid-air.
The solution that did the trick was to replace the table, tr and td with divs and corresponding classes: table would be div id="table_replacer", tr would be div class="tr_replacer" and td would be div class="td_replacer" (change closing tags to divs as well obviously)
To get the solution for my problem the css is:
#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;}
Hope this helps someone.
The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.
<table cellpadding="4">
For creating an illusion of spacing between rows, apply background color to row and then create a thick border with white color so that a "space" is created :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
答案来不及了:)
如果将float应用于tr元素，则可以在具有margin属性的两行之间进行间隔。
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
tr {
display: block;
margin-bottom: 5px;
}
看一下border-collapse：独立属性（默认）和border-spacing属性。
首先，必须使用border-collapse 分隔它们，然后可以使用border-spacing定义列和行之间的空间。
实际上，这两种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>您需要border-collapse: separate;在桌子上摆放；大多数浏览器默认样式表均始于border-collapse: collapse;，这会减少边框间距。
另外，border-spacing：在而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;">
您无法更改表格单元格的边距。但是您可以更改填充。更改TD的填充，这将使单元格更大，并使用增加的填充将文本推离侧面。但是，如果您有边界线，它仍然不是您想要的。
好，你可以
tr.classname td {background-color:red; border-bottom: 5em solid white}
确保将背景色设置在td而非行上。这应该适用于大多数浏览器...（Chrome，即经过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;
}
您可以尝试添加分隔符行：
的HTML：
<tr class="separator" />
CSS：
table tr.separator { height: 10px; }
在父表中，尝试设置
border-collapse:separate;
border-spacing:5em;
加上边框声明，然后看是否达到您想要的效果。但是请注意，IE不支持“分隔边框”模型。
您需要在td元素上使用填充。这样的事情应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。
在下面的CSS代码中，大于号表示填充仅应用于将td子tr级直接指向class元素的元素spaceUnder。这将使使用嵌套表成为可能。（示例代码中的单元格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 |
+---+---+
相似问题
问题类别
Have you tried:
Alternatively, each td can be adjusted as well:
or