Html 如何在表页脚/页眉和正文内容之间留出一点空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18357672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a bit of space between table footer/header and body content?
提问by Jér?me Verstrynge
I want to put a bit of space between HTML table header and footer, and my body content. I though margin-top and margin-bottom would do it, but it does not. Yet the font-weight: bold; directive is taken into account.
我想在 HTML 表格页眉和页脚以及我的正文内容之间留一点空间。我虽然 margin-top 和 margin-bottom 会这样做，但事实并非如此。然而字体粗细：粗体；指令被考虑在内。
My HTML:
我的 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>
My CSS:
我的CSS：
#myTbl {
font-weight: normal;
}
#myTbl thead {
font-weight: bold;
margin-bottom: 10px;
}
#myTbl tfoot {
font-weight: bold;
margin-top: 10px;
}
The JSFiddle is available here. I am using Chrome.
JSFiddle 可在此处获得。我正在使用 Chrome。
采纳答案by james31rock
try using padding on the th elements.
尝试在 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;
}
回答by Hashem Qolami
Use border-spacingproperty:
使用border-spacing属性：
#myTbl {
border-collapse: separate;
border-spacing: 5px;
}
marginproperty:
margin财产：
Applies to all elements except elements with
tabledisplay types other thantable-caption,tableandinline-table.
适用于所有元素，除了
table显示类型不是table-caption,table和 的元素inline-table。
I explained Whyprobably there's no other way to achieve this, lately on SO.
我解释了为什么可能没有其他方法可以实现这一点，最近在 SO 上。
Update:
更新：
Your solution adds spacing between all cells.
您的解决方案增加了所有单元格之间的间距。
Then you need to change the displaytype to be able to use marginproperty:
然后您需要更改display类型才能使用margin属性：
#myTbl thead {
display: table;
width: 100%;
margin-bottom: 10px;
}
#myTbl tfoot {
display: table;
width: 100%;
margin-top: 10px;
}
回答by Haimei
Here is my solution:
这是我的解决方案：
.common-table-body:before {
line-height:1.5em;
content:".";
color:white;
display:block;
}
回答by sideroxylon
You can add an empty row between the head and body/body and footer -
您可以在头部和正文/正文和页脚之间添加一个空行 -
...</thead>
<tr height="10px"></tr>
<tbody>...
