表中两行之间的空间？

Question

这可能通过 CSS 实现吗？

我正在努力

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

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

原文由 Marin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在下面的 CSS 代码中，大于号表示填充仅应用于 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>

这应该有点像这样：

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

原文由 Jan Aagaard 发布，翻译遵循 CC BY-SA 3.0 许可协议