如何从表格边框添加间距/填充/边距?

我希望表格行之间的间距更窄,而表格边框本身的间距/填充更多,例如:

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

10-12 00:18
查看更多