Html CSS表格布局：为什么表格行不接受边距？

.container{
宽度：850px；
填充：0；
显示：表格；
左边距：自动；
右边距：自动；
}
.行{
显示：表格行；
边缘底部：30px；
/*这里*/
}
.home_1{
宽度：64px；
高度：64px；
右边填充：20px；
右边距：10px；
显示：表格单元格；
}
.home_2{
宽度：350px；
高度：64px；
填充：0px；
垂直对齐：中间对齐；
字体大小：150%；
显示：表格单元格；
}
.home_3{
宽度：64px；
高度：64px；
右边填充：20px；
右边距：10px；
显示：表格单元格；
}
.home_4{
宽度：350px；
高度：64px；
填充：0px；
垂直对齐：中间对齐；
字体大小：150%；
显示：表格单元格；
}

---

您是否尝试将底部边距设置为

.row div

，即设置为“单元格”？

---

当您使用实际的HTML表格时，也不能将边距设置为行-仅设置为单元格。

请参阅CSS 2.1标准，第17.5.3节。使用

display:table row

时，DIV的高度仅由其中

表格单元格

元素的高度决定。因此，这些元素上的边距、填充和高度没有影响

---

我见过的最接近的东西是设置

边框间距：0 30px

到container div。但是，这只会在表的上边缘留下空间，这与目的背道而驰，因为您希望在底部留有边距。

这对于工作区（使用实际的表）来说如何

表格{
边界塌陷：塌陷；
}
罗{
边框底部：纯白30px；/*将“白色”更改为背景色*/
}

它不是动态的，因为您必须显式地设置边框的颜色（除非也有办法），但这是我在自己的项目中试验的东西

编辑以包含有关透明的评论：

tr.row{
边框底部：30px实心透明；
}

。行分隔符{
边框顶部：实心透明50px；
}
第一节
第1行
第12行
第二节
第2行1
第2排
#轮廓
第一节
第1行
第12行
第二节
第2行1
第2排

---

这可能是另一个解决方案

对此有一个非常简单的解决方案，

边框间距

和

边框折叠

CSS属性在

显示：表

上工作

您可以使用以下方法获取单元格中的填充/边距

.container{
宽度：850px；
填充：0；
显示：表格；
左边距：自动；
右边距：自动；
边界塌陷：分离；
边界间距：15px；
}
.行{
显示：表格行；
}
.home_1{
宽度：64px；
高度：64px；
右边填充：20px；
右边距：10px；
显示：表格单元格；
}
.home_2{
宽度：350px；
高度：64px；
填充：0px；
垂直对齐：中间对齐；
字体大小：150%；
显示：表格单元格；
}
.home_3{
宽度：64px；
高度：64px；
右边填充：20px；
右边距：10px；
显示：表格单元格；
}
.home_4{
宽度：350px；
高度：64px；
填充：0px；
垂直对齐：中间对齐；
字体大小：150%；
显示：表格单元格；
}

福
福
福
福
福
福

在div之间添加br标记有效。在具有display:table的父级中的display:table行的两个div之间添加br标记在两个元素之间添加间隔区，然后使其不可见：

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

---
文本
.垫片{
可见性：隐藏
}

有效-在表格中添加间距

#options table {
  border-spacing: 8px;
}

---

如果您想要一个特定的边距，例如20px，您可以将表格放在div中

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

---

不幸的是，这不起作用。只有“padding”可以通过

display:table

影响div。但是，这与边距不太一样……尝试使用“透明”而不是“白色”作为颜色。它非常适合我，即使没有表格折叠，只需将透明边框添加到表格单元格中即可！谢谢此外，您还可以尝试

行高

您可以使用

边距：-30px 0

删除顶部和底部的空格。在所有这些解决方法中，边框间距似乎是最具语义的选项。谢谢如果你想在两行之间留出空间，可以在home#4中添加填充底部。这就像一个符咒，但唯一的问题是，只要我应用border separate，它就会从行中删除边框，我就使用行上的边框作为边框底部：1px solid#000，有什么想法吗？这是真正的、最干净的解决方案。必须有更多的选票。谢谢你，克里斯。

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}