html - 表中两行之间的空格？(Space between two rows in a table?)

Question

Is this possible via CSS?

(这可能通过CSS吗？)

I'm trying

(我尝试着)

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

to no avail.

(无济于事。)

Maybe I'm doing something wrong?

(也许我做错了什么？)

  ask by Marin translate from so

Answer 1

You need to use padding on your td elements.

(您需要在td元素上使用填充。)

Something like this should do the trick.

(这样的事情应该可以解决问题。)

You can, of course, get the same result using a top padding instead of a bottom padding.

(当然，您可以使用顶部填充而不是底部填充来获得相同的结果。)

In the CSS code below, the greater-than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder .

(在下面的CSS代码中，大于号表示填充仅应用于直接子spaceUnder到具有类spaceUnder tr元素的td元素。)

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.

(（示例代码中的单元格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 |
+---+---+