为什么 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 应用于您的 table 元素。我认为您可以使用 border-spacing: 0; 并删除 border-collapse.

我假设您将 table 包裹在带有背景色的 DIV 中，因为您想要在页面上创建一条色带，而不是简单地添加背景色table一个人。

在 table 之前和之后添加 space 的方法有几种选择。

1。在 table.

上使用 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。在 table.

上使用 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>

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

Why isn't border-spacing adding padding around my TABLE element?

html

css

html-table

border

1。在 table.

2。在 table.

3。在包装器 DIV.