css - 表格边框和较窄行的间距/填充

Question

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

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

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

整个行和边框的填充增加。我希望行之间的填充比表格边框的填充窄得多。换句话说，我希望外部填充增加，而不是内部行填充。

Answer 1

这是你想要的吗？

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 演示