HTML のテーブル行に丸い角を追加するにはどうすればよいですか?

境界線の半径を使用したテーブル行のスタイル設定

HTML テーブルでは、要素はテーブルの行を表します。 border-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; }</code>

これらのスタイルは次のことを実現します。

• 表のセル内に境界線を保持するには、border-collapse プロパティを分離に設定します。
• に実線の境界線を適用します。要素。
• ほとんどの の上端と左端の境界線を非表示にします。要素。
• 最初の行の左上隅と右上隅に丸い角を適用します。
• 最後の行の左下隅と右下隅に丸い角を適用します。
• の上の境界線を復元します。最初の行の要素と の左境界線最初の列の要素。

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