html - 为什么 border-spacing 不在我的 TABLE 元素周围添加填充？

Question

我想在 TABLE 元素的上方和下方添加一些填充。我读过 border-spacing 可以用于此。所以我有我的 table

<table id="ranks">
    <tbody><tr class="ranksHeaderRow">
        <th></th>
        <th>Name</th>
        <th>Score</th>
        <th>Votes Cast</th>
    </tr>
    <tr class="ranksDataRow even" data-id="25">
        <td>1</td> 
        <td><a class="rankPersonLink" href="/votes/25">NameN</a></td>
        <td>12.0</td>
        <td>1</td>
    </tr>
    ...
</table>

然后就有了这个风格

#ranks {
        margin: 0 auto;
        width: 60%;
        border-collapse: collapse;
        border-spacing: 20px 20px 20px 20px;
}

但是 TABLE 周围没有填充 -- https://jsfiddle.net/00tjhxaw/ .如何让我的填充出现在我的 TABLE 元素周围？我添加了周围的 DIV，以便可以显示背景色，但我不想尽可能更改周围的 DIV。

PS - 让这变得更加复杂，我喜欢单元格之间没有间距的事实，我想保留它。

Answer 1

border-collapse 将阻止 padding 应用于您的表格元素。我认为您可以使用 border-spacing: 0; 并删除 border-collapse。

我假设您将表格包装在具有背景色的 DIV 中，因为您想要在整个页面上创建一条颜色带，而不是简单地向表格单独添加背景色。

在表格前后添加空间的方法有几种选择。

1。在表格上使用 padding。

div {
  background-color: orange;
}

table {
  margin: 0 auto;
  padding: 3rem 0;
  border-spacing: 0;
}

<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

2。在表格上使用 margin。

请记住，您必须使用 clearfix 来确保边距不会超出包装 DIV。

div {
  background-color: orange;
  overflow: hidden; /* my clearfix */
}

table {
  margin: 3rem auto;
  border-spacing: 0;
}

<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

3。在包装器 DIV 上使用 padding。

div {
  padding: 3rem 0;
  background-color: orange;
}

table {
  margin: 0 auto;
  border-spacing: 0;
}

<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>