Edit - Orijinal Adı:Alternatif bir yol CSS çöktü, yuvarlak köşe masa için () border-collapse:collapse ulaşmak için var mı?

Sadece tablonun sınırları daraltmak için almak kök sorunu çözmüyor çıkıyor bu yana, Başlığı daha iyi tartışma yansıtacak şekilde güncelledik.

Yuvarlak köşeler CSS3 border-radius özelliğini kullanarak bir tablo yapmaya çalışıyorum. Kullanıyorum tablo stilleri şöyle bir şey:

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

Sorun burada işte. Ben de border-collapse:collapse özellik ayarlamak istiyorum ve bu ayarlandığında border-radius artık çalışmaz. Aslında kullanmadan border-collapse:collapse aynı etkiyi alabilirim CSS tabanlı bir yolu var mı?

Düzenlemeler:

Basit bir sayfa sorun göstermek için yaptım here (sadece Firefox/Safari).

Sorunun büyük bir kısmını masa yuvarlak köşeler var ayarı td köşe elemanları köşelerinde etkilemez gibi görünüyor. Eğer tablo tek bir renk olsaydı, bu sadece alt ve üst td köşeler için yuvarlak ve son satır sırasıyla yapmak yana bir sorun olmaz. Ancak, tablo için farklı arka plan renkleri başlıkları ayırt etmek için kullanıyorum ve dizme için td o kadar iç unsurlar onların yuvarlak köşeler de gösterecektir.

Çözüm önerileri özeti:

Köşe masa çalışmıyor çünkü yuvarlak olan başka bir element ile masayı çevreleyen dik köşeler "ile kanar."

0 kenarlık genişliğini belirtme tablo çöküşü değil.

Alt td köşe sıfır Microsoft ayarladıktan sonra hala Kare.

Yerine - sorun kaçınarak çalışır JavaScript.

Olası çözümler:

Tablolar sadece dış th/tds ve stil her biri için farklı bir sınıf, her köşede ayrı ayrı geçerli olabilir bu yüzden PHP oluşturulur. Oldukça çok şık değil beri bunu yapmak istemiyorum ve birden fazla tablo için uygulamak için bir ağrı biraz, lütfen öneriler gelmeye devam ediyor.

Olası çözüm 2 stil, JavaScript (jQuery, özellikle) kullanmak için köşe. Bu çözüm de işe yarıyor, ama bu kadar değil ne için (seçici olduğumu biliyorum) arıyorum hala. İki çekinceleri var:

1. bu çok basit bir site ve çok sade bir asgari için JavaScript tutmak istiyorum
2. border-radius kullanarak beni üzerindeki etkisi parçası zarif bozulması ve ilerici geliştirme. Tüm yuvarlak köşeler için border-radius kullanarak, CSS3 uyumlu tarayıcılar ve diğerleri sürekli olarak kare bir site (sen, YANİ bakıyorum) sürekli yuvarlak bir site olmasını umuyorum.

Bugün CSS3 ile bunu yapmak için çalışıyorum gereksiz gibi görünebilir biliyorum, ama kendime göre sebeplerim var. Ayrıca bu sorun w3c belirtimi, zavallı CSS3 desteği olmayan bir sonuç olduğuna işaret etmek istiyorum, herhangi bir çözüm hala CSS3 daha yaygın bir destek var ne zaman uygun ve yararlı olacaktır.

Anladım. Sadece bazı özel seçiciler kullanmak zorunda.

16* *(edit - sadece Safari ve Firefox çalışıyor şimdilik)

Masanın köşeleri yuvarlama sorunu td unsurları da yuvarlak haline vermedi. Böyle bir şey yaparak bunu çözebilir:

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

table tr:last-child td:last-child {
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px
}

Şimdi her şey düzgün, hala border-collapse:collapse sorunu her şeyin bir kırılma var bunun dışında mermi. Bir geçici çözüm html yerine (teşekkürler Joel) cellspacing=0 ayarlamaktır.