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

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

圓角化表格的問(wèn)題是td元素也沒(méi)有變圓。您可以通過(guò)執(zhí)行以下操作來(lái)解決此問(wèn)題：

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)容的問(wèn)題。

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

解決方法

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

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

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

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

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

編輯：

我做了一個(gè)簡(jiǎn)單的頁(yè)面來(lái)演示該問(wèn)題在這里（只火狐/Safari瀏覽器）。

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

擬議解決方案摘要：

用另一個(gè)帶有圓角的元素包圍桌子是行不通的，因?yàn)樽雷拥乃慕恰皾B漏了”。

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

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

相反，使用JavaScript可以避免此問(wèn)題。

可能的解決方案：

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

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

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

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