表格单元格背景通过带有圆角的表格流失 [英] Table cell background bleeds through a table with rounded corners

问题描述

在此演示中可以看到，其中的表设置有圆角（特别是顶部-右和左下），这些角被其包含的单元格的背景色破坏了。

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

如何仅使用CSS来解决此问题（不添加图像或JavaScript）？

解决方案

在表的CSS规则中添加 overflow：hidden; 到表的CSS规则中进行裁剪。 MDN参考指出：

overflow CSS属性指定是剪切内容，渲染
滚动条还是显示块级元素的溢出内容。

由于表为被视为块级元素，则适用此规则。

要克服与Gecko驱动的浏览器（例如Firefox）的不一致之处，请同时应用 display：inline-block 。 / p>

---

请参见更新了jsFiddle上的演示。

As can be seen on this demo, in which a table is set with round corners (specifically the top-right and bottom-left), those corners are breached by their contained cell's background color.

I tried applying some padding to the table, but that didn't help. Is my only option to add an extra column and row and set their background-color to transparent?

How to fix this using CSS only (no added images or javascript)?

解决方案

Add overflow: hidden; to the table's CSS rule to clip its inner content. The MDN reference states that:

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

As tables are considered block level elements, this rule applies.

To overcome inconsistencies with Gecko driven browsers (e.g. Firefox), apply display: inline-block as well.

---

See the updated demo on jsFiddle.

这篇关于表格单元格背景通过带有圆角的表格流失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！