协慌网

通过 CSS 可以做到吗？

我正在努力

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

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

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

在下面的 CSS 代码中，大于号表示填充仅适用于td元素，这些元素是将子级直接指向类为spaceUnder tr元素的子元素。这将使使用嵌套表成为可能。 （示例代码中的单元格 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 |
+---+---+

在父表中，尝试设置

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

加上边框声明，然后看是否达到您想要的效果。但是请注意，IE 不支持 “分隔边框” 模型。

您的表中有包含任何数据的 ID 相册... 我省略了 trs 和 tds

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

在 CSS 中：

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