html - "border-collapse: collapse"从表中删除填充

Question

我有两个问题:

1. 是否有合理的解释，为什么会这样？
2. 是否有针对这种情况的 CSS 解决方法？

谢谢!

table {
      border-collapse: collapse;
      padding:30px; /* Padding not working */
    }

<table>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
</table>

Answer 1

is there a logical explanation, Why is this working like that?

折叠边框时，它会将相邻的边框连接在一起。

表格外边缘周围的边框与外部单元格的外边框相邻。

如果这些边框连接在一起，则不能在它们之间放置填充。没有“之间”。

Is there a CSS workaround for that situation?

一般来说，不是普通的。

您需要在表格周围添加另一个元素，并将填充放在那里。

在这种情况下，您已经有了容器 div，因此您可以将内边距移动到它。

.container {
  width: 400px;
  height: 300px;
  margin: 40px auto;
  background: #ddd;
  padding: 30px;
}

table {
  text-align: center;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
}

<div class="container">
  <table>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </table>
</div>