Question

我想在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。

Answer 1

使用border-spacing属性：

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

<强> Fiddle

margin属性：

适用于除table，table-caption和table以外的inline-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

Answer 2

尝试在元素上使用填充。

#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/

Answer 3

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

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

Answer 4

这是我的解决方案：

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

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

4 个答案:

更新