Question

我有两个问题：

有一个合乎逻辑的解释，为什么这样工作？
这种情况是否有CSS解决方法？

谢谢！

HTML

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

CSS

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

Live Example

Answer 1

是否有合理的解释，为什么这样工作？

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

桌子外边缘周围的边框与外面细胞的外边界相邻。

如果将这些边框连接在一起，则无法在它们之间添加填充。没有“介于”之间。

这种情况是否有CSS解决方法？

一般来说，不是一个简单的。

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

在这种情况下，您已经拥有容器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>

“border-collapse：collapse”从表中删除填充

1 个答案: