HTML のテーブル行に境界線の半径を適用するにはどうすればよいですか?

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

HTML テーブルのスタイルを設定する際、開発者がテーブルの行 () にスタイルを適用しようとすると制限に遭遇することがよくあります。 border-collapse を使用して境界線スタイルを設定すると、 の周囲に境界線を配置できます。テーブル内の要素は、 には拡張されません。

テーブル行に境界線の半径 (-moz-border-radius またはモダンな border-radius) を適用しようとすると、一般的な問題が発生します。残念ながら、このプロパティは に直接適用できません。 elements.

解決策:

この制限を考慮すると、テーブル行の角を丸めるには回避策が必要です。解決策には、境界線のスタイル設定戦略を個々のユーザーに適用することが含まれます。要素:

<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; }</code>

このメソッドは、 で特定の境界線のスタイルと半径を設定することにより、テーブルの行に丸い角の錯覚を作成します。各行の先頭と末尾の要素。 border-collapse: Separate プロパティは、境界線を各セルに個別に適用して、目的のスタイル効果を有効にすることができるため、非常に重要です。

以上がHTML のテーブル行に境界線の半径を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。