Question

可以在this demo上看到，其中一个表设置有圆角（特别是右上角和左下角），这些角被其包含的单元格的背景颜色破坏。

我尝试将一些padding应用于表格，但这没有用。我唯一的选择是添加额外的列和行，并将background-color设置为transparent吗？

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

Answer 1

将overflow: hidden;添加到表格的CSS规则中以剪切其内部内容。 MDN reference表示：

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

由于表格为considered block level elements，因此适用此规则。

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

请参阅updated demo on jsFiddle。

Answer 2

可能是此选项可以帮助您

table thead tr:first-child td:last-child {
    border-radius: 0 1em 0 0;
}

table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 1em;
}

http://jsfiddle.net/ZFYvq/10/

此外，代替伪类可以使用类并将它们添加到所需的单元格

Answer 3

Demo Fiddle

最好将表格包裹在div中并设置相关的边框半径属性，例如：

div{
    border-top-right-radius: 1em; 
    border-bottom-left-radius: 1em; 
    overflow:hidden;
}

通过将表的display属性设置为table以外的任何其他内容，您违反了适用于table元素的特定布局规则，这些规则通常会产生不可预见的问题，例如在IE工作。以上是唯一真正的跨浏览器语义解决方案。

NB。要删除表格底部的粗边框，请将border-bottom:none;添加到div类

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

3 个答案:

Demo Fiddle