[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか？

質問

Edit - Original Title: を実現する別の方法はありますか？ 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 実際に使用することなく？

編集する。

この問題を説明するために、簡単なページを作成しました。 こちら (Firefox/Safariのみ)。

テーブルの角が丸くなるように設定しても、コーナーの角には影響がないことが問題の大きな要因のようです td 要素で構成されています。もしテーブルがすべて1色であれば、上と下の td の角は、最初の行と最後の行でそれぞれ丸くなっています。しかし、私は見出しを区別するためとストライピングのためにテーブルの背景色を変えているので、内側の td 要素も同様に角が丸く表示されます。

解決策の提案のまとめ。

テーブルを角の丸い別の要素で囲むと、テーブルの四角い角が透けて見えるため、うまくいきません。

ボーダーの幅を0に指定しても、テーブルが崩れない。

底面 td の角は、cellspacingを0にした後も四角いままです。

代わりにJavaScriptを使用することで、この問題を回避することができます。

考えられる解決策

テーブルはPHPで生成されているので、外側のth/tdにそれぞれ別のクラスを適用して、各コーナーを別々にスタイル設定すればいいのです。この方法は、あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、やりたくないのですが、どんどん提案してください。

解決策2として、JavaScript（具体的にはjQuery）を使ってコーナーにスタイルを設定する方法が考えられます。この解決策も有効ですが、私が求めているものとはまだ少し違います（私がうるさいことは承知しています）。2つの懸念があります。

1. このサイトは非常に軽量なサイトなので、JavaScriptは必要最低限にしたい。
2. 私にとってborder-radiusの魅力のひとつは、graceful degradationとprogressive enhancementです。すべての角丸にborder-radiusを使うことで、CSS3対応ブラウザでは一貫して丸いサイト、それ以外のブラウザでは一貫して四角いサイトを実現したいと思っています（IEの皆さん、見てますか）。

今のCSS3でこんなことをしても無駄だと思われるかもしれませんが、理由があるんです。また、この問題はW3Cの仕様に起因するものであり、CSS3のサポートが不十分なわけではないことを指摘したいと思います。

解決方法は？

私はそれを理解した。特殊なセレクタを使えばいいんだ。

テーブルの角を丸くすると、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 をテーブル上に表示します。