(adsbygoogle = window.adsbygoogle || []).push({}); 如何解決CSS3的border-radius屬性和border-collapse：collapse不能混合使用如何使用邊框半徑創建帶有圓角的折疊表格？？

我想到了。您只需要使用一些特殊的選擇器即可。

圓角化表格的問題是td元素也沒有變圓。您可以通過執行以下操作來解決此問題：

table tr:last-child td:first-child { border-bottom-left-radius: 10px;}table tr:last-child td:last-child { border-bottom-right-radius: 10px;}

現在一切正常，除了仍然存在border-collapse: collapse破壞所有內容的問題。

一種解決方法是在表上添加border-spacing: 0默認值并保留默認值border-collapse: separate。

解決方法

編輯-原標題： 是否有其他方式來實現border-collapse:collapse的CSS（為了有倒塌，圓角表）？

事實證明，僅使表格的邊框折疊起來并不能解決根本問題，所以我更新了標題以更好地反映討論內容。

我正在嘗試 使用該CSS3 border-radius屬性 制作帶有圓角的表 。我正在使用的表格樣式如下所示：

table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px}

這是問題所在。我也想設置該border-collapse:collapse屬性，并且設置該屬性border-radius后將不再起作用。有沒有一種基于CSS的方式可以獲得與border-collapse:collapse不實際使用相同的效果？

編輯：

我做了一個簡單的頁面來演示該問題在這里（只火狐/Safari瀏覽器）。

看來問題的很大一部分是將表設置為具有圓角不會影響Cornertd元素的角。如果桌子全是一種顏色，那將不是問題，因為我可以td分別使第一行和最后一行的上角和下角變圓。但是，我在表中使用了不同的背景色來區分標題和條紋，因此內部td元素也將顯示其圓角。

擬議解決方案摘要：

用另一個帶有圓角的元素包圍桌子是行不通的，因為桌子的四角“滲漏了”。

將邊框寬度指定為0不會折疊表格。

底部td四角設置CELLSPACING零后仍然廣場。

相反，使用JavaScript可以避免此問題。

可能的解決方案：

這些表是用PHP生成的，因此我可以將一個不同的類應用于每個外部th/tds并分別設置每個角的樣式。我不希望這樣做，因為它不是很優雅，并且要應用于多個表有點麻煩，所以請繼續提出建議。

可能的解決方案2是使用JavaScript（特別是jQuery）對角進行樣式設置。此解決方案也可以使用，但仍然不是我想要的（我知道我很挑剔）。我有兩個保留意見：

這是一個非常輕量級的網站，我希望將JavaScript保持在最低水平 使用邊界半徑對我來說具有吸引力的一部分是優美的退化和漸進的增強。通過對所有圓角使用border-radius，我希望在支持CSS3的瀏覽器中擁有一個一致的圓形站點，并在其他瀏覽器中擁有一個一致的正方形站點（我在看著您，IE）。

我知道今天嘗試使用CSS3似乎沒有必要，但是我有自己的理由。我還要指出的是，此問題是w3c規范的結果，而不是對CSS3的支持不佳，因此，當CSS3得到更廣泛的支持時，任何解決方案都仍然是相關且有用的。