(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默認(rèn)值并保留默認(rèn)值border-collapse: separate。

解決方法

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

事實(shí)證明，僅使表格的邊框折疊起來并不能解決根本問題，所以我更新了標(biāo)題以更好地反映討論內(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不實(shí)際使用相同的效果？

編輯：

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

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

擬議解決方案摘要：

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

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

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

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

可能的解決方案：

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

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

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

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