border-radius をテーブルの行に直接適用できない場合、CSS を使用してテーブル全体の角を丸くするにはどうすればよいですか?

テーブルの行に境界線の半径を適用する

多くの開発者は、テーブルの行 ( ）。このような課題の 1 つは、border-radius を tr 要素に適用しようとするときに発生します。

この問題に対処するには、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 サイトの他の関連記事を参照してください。