“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

有没有合乎逻辑的解释，为什么会这样？

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

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

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

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

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

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

在这种情况下，您已经拥有容器 div，因此您可以将填充移动到该 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>