8

我想在 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 可在此处获得。我正在使用 Chrome。

4

4 回答 4

8

尝试在第 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/

于 2013-08-21T12:44:11.480 回答
8

这是我的解决方案：

.common-table-body:before {
  line-height:1.5em;
  content:".";
  color:white;
  display:block;
}
于 2015-06-18T16:25:05.683 回答
7

使用border-spacing属性：

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

小提琴

margin财产：

适用于所有元素，但table显示类型不是table-caption和table的元素除外inline-table。

我解释了为什么最近在 SO 上可能没有其他方法可以实现这一点。

更新：

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

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

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

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

小提琴

于 2013-08-21T12:43:17.240 回答
4

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

     ...</thead>
     <tr height="10px"></tr>
     <tbody>...
于 2013-08-21T12:50:58.523 回答