Html 表中两行之间的空间？

Space between two rows in a table?

提问by Marin

Is this possible via CSS?

这可以通过 CSS 实现吗？

I'm trying

我想

tr.classname {
  border-spacing: 5em;
}

to no avail. Maybe I'm doing something wrong?

无济于事。也许我做错了什么？

回答by Jan Aagaard

You need to use padding on your tdelements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.

您需要在td元素上使用填充。像这样的事情应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。

In the CSS code below, the greater-than sign means that the padding is only applied to tdelements that are direct children to trelements with the class spaceUnder. This will make it possible to use nested tables. (Cell C and D in the example code.) I'm not too sure about browser support for the direct child selector (think IE 6), but it shouldn't break the code in any modern browsers.

在下面的 CSS 代码中，大于号表示填充仅应用于作为具有 class 的元素的td直接子tr元素的元素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>

This should render somewhat like this:

这应该呈现如下：

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

回答by user37731

In the parent table, try setting

在父表中，尝试设置

border-collapse:separate; 
border-spacing:5em;

Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn't support the "separated borders" model.

加上一个边界声明，看看这是否达到你想要的效果。但是请注意，IE 不支持“分离边框”模型。

回答by Pradyut Bhattacharya

You have table with id albums with any data... I have omitted the trs and tds

你有带有任何数据的 id 专辑表......我省略了 trs 和 tds

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

In the css:

在CSS中：

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

回答by Coleman

since I have a background image behind the table, faking it with white padding wouldn't work. I opted to put an empty row in-between each row of content:

因为我在桌子后面有一张背景图片，所以用白色填充来伪造它是行不通的。我选择在每行内容之间放置一个空行：

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

then use css to give the spacer rows a certain height and transparent background.

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

回答by Justus Romijn

From Mozilla Developer Network:

来自 Mozilla 开发者网络：

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

border-spacing CSS 属性指定相邻单元格边框之间的距离（仅适用于分离边框模型）。这相当于展示性 HTML 中的 cellspacing 属性，但可选的第二个值可用于设置不同的水平和垂直间距。

That last part is often overseen. Example:

最后一部分经常受到监督。例子：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

UPDATE

更新

I now understand that the OP wants specific, seperate rows to have increased spacing. I've added a setup with tbodyelements that accomplishes that without ruining the semantics. However, I'm not sure if it is supported on all browsers. I made it in Chrome.

我现在明白 OP 希望特定的、单独的行增加间距。我添加了一个带有tbody元素的设置，可以在不破坏语义的情况下实现这一点。但是，我不确定是否所有浏览器都支持它。我是用 Chrome 制作的。

The example below is for showing how you can make it look like the table exists of seperate rows, full blown css sweetness. Also gave the first row more spacing with the tbodysetup. Feel free to use!

下面的示例用于展示如何使表格看起来像存在单独的行，完全成熟的 css 甜蜜。还为第一行tbody设置了更多间距。放心使用！

Support notice: IE8+, Chrome, Firefox, Safari, Opera 4+

支持通知：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>

回答by Denis

You may try to add separator row:

您可以尝试添加分隔行：

html:

html：

<tr class="separator" />

css:

css：

table tr.separator { height: 10px; }

回答by Robert C. Barth

You can't change the margin of a table cell. But you CAN change the padding. Change the padding of the TD, which will make the cell larger and push the text away from the side with the increased padding. If you have border lines, however, it still won't be exactly what you want.

您无法更改表格单元格的边距。但是你可以改变填充。更改 TD 的填充，这将使单元格变大，并将文本从填充增加的一侧推开。但是，如果您有边界线，它仍然不是您想要的。

回答by Syno

Take a look at the border-collapse: separateattribute (default) and the border-spacingproperty.

看一下border-collapse：separate属性（默认）和border-spacing属性。

First, you have to seperatethem with border-collapse, then you can define the space between columns and rowswith border-spacing.

首先，您必须使用border-collapse将它们分开，然后您可以使用border-spacing定义列和行之间的空间。

Both of these CSS properties are actually well-supported on every browser, 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>

回答by Paul

Ok, you can do

好的，你可以

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

Make sure the background color is set on the td rather than the row. This should work across most browsers... (Chrome, ie & ff tested)

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

回答by John Haugeland

You need to set border-collapse: separate;on the table; most browser default stylesheets start at border-collapse: collapse;, which ditches border spacing.

你需要border-collapse: separate;在桌子上设置；大多数浏览器默认样式表都从 开始border-collapse: collapse;，它消除了边框间距。

Also, border-spacing: goes on the TD, not the TR.

此外，border-spacing: 继续TD，而不是TR.

Try:

尝试：

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