为什么没有边框间距在我的TABLE元素周围添加填充？

Question

我想在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;
}

但是桌子周围没有填充 - https://jsfiddle.net/00tjhxaw/。如何让我的填充显示在TABLE元素周围？我添加了周围的DIV，因此我可以显示背景颜色，但是如果可能的话，我不想改变周围的DIV。

PS - 为了使这个更复杂，我喜欢这样的事实，即细胞之间没有间距，我想保留它。

Answer 1

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

我假设您要在具有背景颜色的DIV中包裹您的桌子，因为您想要在整个页面上创建一个颜色带，而不是简单地仅在表格中添加背景颜色。 / p>

您可以使用几种方法在表格之前和之后添加空间。

1。在表格中使用padding。

＆＃13;

＆＃13;

div {
  background-color: orange;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2。在表格中使用margin。

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

属性border-spacing不适用于border-collapse: collapse;

  

border-spacing CSS属性指定相邻<table>单元格边框之间的距离。仅当border-collapse为separate时，此属性才适用。 - MDN

由于上述事实，您需要一个包装器div并应用您想要围绕表格的padding量，或将margin应用于表格，以便表格单元格中的间距不会受到影响。

我还在div上使用了display: inline-block;，因此它适合表格宽度，您也可以使用display: table;，因此其后的任何内容都会开始换行。

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid;
}

.container {
  display: inline-block;
  padding: 20px;
  background: silver;
}

<div class="container">
  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>

顺便说一下，border-spacing只允许使用单值或双值，即使设置border-spacing: 20px 20px 20px 20px;

，border-collapse: separate;的示例也不起作用

工作示例：

/* Default */
border-collapse: separate;

/* <length> */
border-spacing: 20px;

/* horizontal <length> | vertical <length> */
border-spacing: 20px 20px;