CSSを使用して表のセルに丸い角を追加するにはどうすればよいですか?

表のセルに境界線の半径を適用する

表の行 (tr) に丸い角を追加するには、次の方法を検討してください。

• CSS の制限: border-radius を tr または table 要素に直接適用できないことに注意してください。代わりに、それを個々の表のセル (td) に適用する必要があります。
• セルの境界線とパディングを分離する:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}</code>

• コーナースタイル:

<code class="css">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; }</code>

• 上と左のセルの境界線スタイル:

<code class="css">tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

このテクニック必要な境界線と間隔を維持しながら、テーブルに丸い角を作成できます。

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