Html CSS：如何在表中的行之间创建间隙？

CSS: how do I create a gap between rows in a table?

提问by MGOwen

Meaning making the resultant table look less like this:

这意味着使结果表看起来不像这样：

[===ROW===]
[===ROW===]
[===ROW===]
[===ROW===]

... and more like this:

......更像这样：

[===ROW===]

[===ROW===]

[===ROW===]

[===ROW===]

I tried adding

我尝试添加

margin-bottom:1em;

to both tdand trbut got nothing. Any ideas?

既TD和TR，但一无所获。有任何想法吗？

回答by John Haugeland

All you need:

一切你需要的：

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

That assumes you want a 1em vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.

假设您想要一个 1em 的垂直间隙，而没有水平间隙。如果您这样做，您可能还应该考虑控制行高。

Sort of weird that some of the answers people gave involve border-collapse: collapse, whose effect is the exact opposite of what the question asked for.

有点奇怪，人们给出的一些答案涉及边界崩溃：崩溃，其效果与问题所要求的完全相反。

回答by Ryan Florence

table {
    border-collapse: collapse;
}

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

The cells won't react to anything unless you set the border-collapse first. You can also add borders to TR elements once that's set (among other things.)

除非您先设置边框折叠，否则单元格不会对任何内容做出反应。您还可以在设置后为 TR 元素添加边框（除其他外）。

If this is for layout, I'd move to using DIVs and more up-to-date layout techniques, but if this is tabular data, knock yourself out. I still make heavy use of tables in my web applications for data.

如果这是用于布局，我会转而使用 DIV 和更多最新的布局技术，但如果这是表格数据，请自行解决。我仍然在我的 Web 应用程序中大量使用表格来获取数据。

回答by Flimm

If none of the other answers are satisfactory, you could always just create an empty rowand style it with CSS appropriately to be transparent.

如果其他答案都不令人满意，您总是可以创建一个空行并使用 CSS 适当地将其设置为透明。

回答by Kobi

If you don't have borders, or have borders and want the spacing inside the cells, you can use padding, or line-height. As far as I know, margin has no effect on cells and rows.
A CSS property for spacing of cells is border-spacing, but it doesn't work on IE6/7 (so you can use it depending on your crowd).

如果您没有边框，或者有边框并希望单元格内有间距，则可以使用padding, 或line-height。据我所知，边距对单元格和行没有影响。
用于单元格间距的 CSS 属性是border-spacing，但它不适用于 IE6/7（因此您可以根据人群使用它）。

If all else fails you can use the old cellspacingattribute in your markup - but this will also give you spacing between the columns. Some CSS resetsuggest you should set it anyway to get cross-browser support:

如果所有其他方法都失败了，您可以cellspacing在标记中使用旧属性 - 但这也会为您提供列之间的间距。一些CSS 重置建议您无论如何都应该设置它以获得跨浏览器支持：

/* tables still need cellspacing="0"in the markup */

/* 表中仍然需要cellspacing="0"标记 */

回答by Arash Esmaeili

This is the way (I was thinking it's impossible):

这是方法（我认为这是不可能的）：

First give the table only vertical border-spacing (for example 5px) and set it's horizontal border-spacing to 0. Then you should give proper borders to each row cell. For example the right-most cell in each row should have border on top, bottom and right. The left-most cells should have border on top, bottom and left. And the other cells between these 2 should only have border on top and bottom. Like this example:

首先为表格提供垂直边框间距（例如 5px）并将其水平边框间距设置为 0。然后您应该为每行单元格提供适当的边框。例如，每行最右边的单元格应该在顶部、底部和右侧有边框。最左边的单元格应该在顶部、底部和左侧有边框。而这两个之间的其他单元格应该只在顶部和底部有边框。像这个例子：

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

回答by Abrar Jahin

Simply you can use padding-topand padding-bottomon a tdelement.

只需在元素上使用padding-top和即可。padding-bottomtd

Unitcan anything from this list:

单位可以是此列表中的任何内容：

Demo Code:

演示代码：

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

回答by Huy Le

In my opinion, the easiest way to do is adding padding to your tag.

在我看来，最简单的方法是在标签中添加填充。

td {
 padding: 10px 0
}

Hope this will help you! Cheer!

希望能帮到你！欢呼！

回答by greg

the padding in the TD works if you want the space to have the same background color as the td

如果您希望空间具有与 td 相同的背景颜色，则 TD 中的填充有效

in my case, requirement was for white space between header row and whatever was above it

就我而言，要求是标题行与其上方的任何内容之间的空白

by applying this styling to a single cell, i was able to get the desired separation. It was not necessary to add it to all cells... Arguably not the MOST elegant, but possibly more elegant than separator rows.

通过将此样式应用于单个单元格，我能够获得所需的分离效果。没有必要将它添加到所有单元格中......可以说不是最优雅的，但可能比分隔行更优雅。

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

回答by greg

You could also just modify the height for each row using CSS.

您也可以使用 CSS 修改每一行的高度。

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

You could also modify the height of the <td>element, it should give you the same result.

您还可以修改<td>元素的高度，它应该给您相同的结果。

回答by rahul

If you stick with the design using tables the best idea will be to give an empty row with no content and specified height between each rows in the table.

如果您坚持使用表格的设计，最好的办法是在表格中的每行之间提供一个没有内容和指定高度的空行。

You can use div to avoid this complexity. Just give a margin to each div.

您可以使用 div 来避免这种复杂性。只需给每个 div 留一个边距。