ホームページ > 記事 > ウェブフロントエンド > border-radius をテーブルの行に直接適用できない場合、CSS を使用してテーブル全体の角を丸くするにはどうすればよいですか?
多くの開発者は、テーブルの行 (
この問題に対処するには、border-radius はテーブル内の個々のセル (
CSS スタイル
重要なトリックは、境界線を使用して各セルの表の境界線を分離することです。 -collapse: 別のプロパティ。さらに、境界線のスタイルを設定して外観を微調整することもできます。次の CSS コード スニペットは例を示しています。
<code class="css">table { border-collapse: separate; border-spacing: 0; } td { border: solid 1px #000; border-style: none solid solid none; padding: 10px; } tr:first-child td:first-child { border-top-left-radius: 10px; } tr:first-child td:last-child { border-top-right-radius: 10px; } tr:last-child td:first-child { border-bottom-left-radius: 10px; } tr:last-child td:last-child { border-bottom-right-radius: 10px; } tr:first-child td { border-top-style: solid; } tr td:first-child { border-left-style: solid; }
HTML の例
CSS スタイル ルールを定義したら、テーブルに簡単に適用できます。
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
このソリューションは、個々のセルを構成要素に変換し、丸い角を含むテーブルの外観を完全に制御できるようにします。
以上がborder-radius をテーブルの行に直接適用できない場合、CSS を使用してテーブル全体の角を丸くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明:この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。関連記事
続きを見る