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

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

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

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

現(xiàn)在一切正常，除了仍然存在border-collapse: collapse破壞所有內(nèi)容的問題。

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

解決方法

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

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

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

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

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

編輯：

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

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

擬議解決方案摘要：

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

將邊框?qū)挾戎付?不會折疊表格。

底部td四角設(shè)置CELLSPACING零后仍然廣場。

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

可能的解決方案：

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

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

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

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