3

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

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

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

4

3 回答 3

9

添加overflow: hidden;到表格的 CSS 规则以剪辑其内部内容。MDN 参考指出：

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

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

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

请参阅jsFiddle 上的更新演示。

于 2012-11-08T20:30:04.593 回答
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/

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

于 2012-11-08T20:33:54.240 回答
0

演示小提琴

您最好将表格包装在div带有相关边框半径属性集的 a 中，例如：

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

通过将display表格的属性设置为除table您之外的任何其他内容，都会破坏适用于table元素的特定布局规则，这会产生经常无法预料的问题，例如无法在 IE 中工作。以上是唯一真正的跨浏览器语义解决方案。

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

于 2014-05-06T13:40:22.897 回答