表格单元格背景通过带圆角的表格渗透

Question

从这个演示中可以看出,其中一个表设置有圆角(特别是右上角和左下角),这些角被其包含的单元格的背景颜色破坏.

我尝试将一些应用padding到桌面上,但这没有帮助.我唯一的选择是添加额外的列和行并将其设置background-color为transparent？

如何使用CSS修复此问题(没有添加图片或javascript)？

Answer 1

添加overflow: hidden;到表的CSS规则以剪切其内部内容.该MDN参考指出:

overflow CSS属性指定是否剪辑内容,渲染滚动条或显示块级元素的溢出内容.

由于表被视为块级元素,因此适用此规则.

要克服与Gecko驱动的浏览器(例如Firefox)的不一致,也可以应用display: inline-block.