表中的两行之间的空间？ [英] Space between two rows in a table?

问题描述

这可能通过CSS吗？

Is this possible via CSS?

我在尝试

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

推荐答案

您需要在 td 元素。这样的东西应该做的伎俩。当然，您可以使用顶部填充而不是底部填充获得相同的结果。

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

在下面的CSS代码中，大于号表示填充仅适用于 td 元素，它们是 spaceUnder 元素的 tr / code>这将使得可以使用嵌套表。 （在示例代码中的单元格C和D）我不太确定浏览器支持直接子选择器（认为IE 6），但它不应该打破任何现代浏览器中的代码。

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

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder > td
{
  padding-bottom: 1em;
}

HTML代码：

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

这篇关于表中的两行之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！