編集-元のタイトル:(折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapse
にCSS
)を達成する別の方法はありますか?
テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。
CSS3
border-radius
プロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
ここに問題があります。border-collapse:collapse
プロパティも設定したいのですが、設定するとborder-radius
機能しなくなります。border-collapse:collapse
実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか?
編集:
ここで問題を説明する簡単なページを作成しました(Firefox / Safariのみ)。
問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd
要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd
、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd
要素にも丸い角が表示されます。
提案されたソリューションの概要:
丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。
ボーダーの幅を0に指定しても、テーブルは折りたたまれません。
ボトムtd
ゼロにCELLSPACINGを設定した後、まだ直角の角。
代わりにJavaScriptを使用すると、問題を回避できます。
可能な解決策:
テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。
考えられる解決策2は、JavaScript(具体的にはjQuery)を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません(私はうるさいです)。2つの予約があります。
- これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います
- border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています(私はIEを見てます)。
今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。