表格單元格背景通過帶圓角的表格滲透

Question

從這個演示中可以看出，其中一個表設置有圓角（特別是右上角和左下角），這些角被其包含的單元格的背景顏色破壞。

我嘗試在桌子上應用一些padding ，但這沒有幫助。 我唯一的選擇是添加額外的列和行並將其background-color設置為transparent ？

如何使用CSS修復此問題（沒有添加圖片或javascript）？

Answer 1

添加overflow: hidden; 到表的CSS規則來剪輯其內部內容。 MDN參考指出：

overflow CSS屬性指定是否剪輯內容，渲染滾動條或顯示塊級元素的溢出內容。

由於表被視為塊級元素 ，因此適用此規則。

要克服與Gecko驅動的瀏覽器（例如Firefox）的不一致，請同時應用display: inline-block 。

---

請參閱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

演示小提琴

最好將表包裝在具有相關邊界半徑屬性集的div ，例如：

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

通過設定display為表屬性以外的任何table你破壞了其適用於特定的布局規則table元素，這往往會產生不可預見的問題，就像在IE無法正常工作。 以上是唯一真正的跨瀏覽器語義解決方案。

NB。 要刪除表格底部的粗邊框，請添加border-bottom:none; 到div班