如何从表格边框添加间距/填充/边距?
我希望表格行之间的间距更窄,而表格边框本身的间距/填充更多,例如:
<table /*inner margin/padding = 50px */>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
</table>
当我做:
table border-collapse:separate; border-spacing: 10px;
整个行和边框的填充增加。我希望行之间的填充比表格边界的填充窄得多。换句话说,我希望增加外部填充,而不是内部行填充。
最佳答案
这是你想要的吗?
HTML:
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Family</th>
<th>Email Address</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>john@doe.com</td>
</tr>
<!-- So on -->
</table>
CSS:
table {
padding: 48px; /* 48 + 2 = 50px */
border-collapse: separate; /* | */
border-spacing: 2px; /* <----------- */
}
table, th, td {
border: 1px solid black;
}
您可以使用
border-spacing
属性指定相邻单元格的边框之间的距离,并使用padding
属性在表格的边框及其内容之间创建空间。JSBin Demo
关于css - 从表格边框和较窄的行开始的间距/填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18389602/