如何在表格页脚/页眉和正文内容之间放置一点空间？答案

【问题标题】：How to put a bit of space between table footer/header and body content?如何在表格页脚/页眉和正文内容之间放置一点空间？
【发布时间】：2013-08-23 20:08:55
【问题描述】：

我想在 HTML 表格页眉和页脚以及我的正文内容之间留一点空间。我虽然 margin-top 和 margin-bottom 会这样做，但事实并非如此。然而字体粗细：粗体；指令被考虑在内。

我的 HTML：

<table id="myTbl">
   <thead>
     <tr>
       <th>My Table Header</th>
     </tr>
   </thead>  
   <tbody>
    <tr>
      <td>My Body Content</td>
    </tr>
    </tbody>
   <tfoot>
     <tr>
       <th>My Table Footer</th>
     </tr>
   </tfoot>  
</table>

我的 CSS：

#myTbl {
    font-weight: normal;
}

#myTbl thead {
    font-weight: bold;
    margin-bottom: 10px;
}

#myTbl tfoot {
    font-weight: bold;
    margin-top: 10px;
}

JSFiddle 可用here。我正在使用 Chrome。

【问题讨论】：

保证金不适用于内部 <table> 元素 - w3.org/TR/CSS2/box.html#margin-properties
可能重复？ stackoverflow.com/questions/9258754/…

标签： html css html-table footer

【解决方案1】：

尝试在第 th 个元素上使用填充。

#myTbl {
    font-weight: normal;
}

#myTbl thead tr th{
    font-weight: bold;
    padding-bottom: 10px;
}

#myTbl tfoot tr th{
    font-weight: bold;
    padding-top: 10px;
}

http://jsfiddle.net/nCe3k/9/

【讨论】：

【解决方案2】：

这是我的解决方案：

.common-table-body:before {
  line-height:1.5em;
  content:".";
  color:white;
  display:block;
}

【讨论】：

【解决方案3】：

使用border-spacing 属性：

#myTbl {
    border-collapse: separate;
    border-spacing: 5px;
}

Fiddle

margin 属性：

适用于除具有table-caption、table 和inline-table 以外的table 显示类型的元素之外的所有元素。

我解释了为什么可能没有其他方法可以实现这一点，lately on SO。

更新：

您的解决方案在所有单元格之间添加间距。

然后你需要更改display 类型才能使用margin 属性：

#myTbl thead {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

#myTbl tfoot {
    display: table;
    width: 100%;
    margin-top: 10px;
}

Fiddle

【讨论】：

您的解决方案增加了所有单元格之间的间距。这就是我要找的东西：jsfiddle.net/nCe3k/10
好的，但是多列的时候就不行了：jsfiddle.net/nCe3k/13
@JVerstry，是的，在这种情况下它会失败。但请注意，padding 仅在 thead 和 tfoot 单元格中没有任何 background 或 border 时有用。

【解决方案4】：

您可以在头部和正文/正文和页脚之间添加一个空行 -

     ...</thead>
     <tr height="10px"></tr>
     <tbody>...

【讨论】：