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

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

我尝试在桌子上应用一些填充,但这没有帮助.我唯一的选择是添加额外的列和行并将其背景颜色设置为透明?

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

最佳答案
添加溢出:隐藏;到表的CSS规则来剪辑其内部内容. MDN reference指出:

The overflow CSS property specifies whether to clip content, render
scroll bars or display overflow content of a block-level element.

由于表格为considered block level elements,因此适用此规则.

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

updated demo on jsFiddle.

转载注明原文:html – 表格单元格背景通过带圆角的表格渗透 - 代码日志