CSS のみを使用してテーブルの角を丸くするにはどうすればよいですか?

CSS のみを使用してテーブルの角を丸くする

CSS のみを使用して HTML テーブルの角を丸くしようとするユーザーは、テーブルの境界線。この問題に対処する包括的なアプローチは次のとおりです。

CSS の実装

table {
  border-collapse: separate;
  border: solid black 1px;
  border-radius: 6px;
}

td, th {
  border-left: solid black 1px;
  border-top: solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

説明

まず、境界線を設定します。 Collapse: Separate では、セル間に境界線を表示できます。次に、border プロパティでテーブルの外側の境界線を定義します。 border-radius は丸い角を作成します。

セルとヘッダー内で、border-left と border-top はそれぞれ垂直境界線と水平境界線を指定します。ヘッダーには、丸い角を目立たせるために青色の背景が付いています。さらに、テーブルの外側の境界線と重ならないように、ヘッダーの border-top が削除されます。

最後に、最初のセルとヘッダーの border-left を削除すると、不要な垂直境界線が削除されます。これにより、テーブル内の垂直方向と水平方向の境界線を維持しながら、すべての角のセルの角が丸くなります。

使用例

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

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