CSS を使用して角の丸い HTML テーブルを作成する

Naila Saad Siddiqui 2023年6月20日

CSS CSS Table

この簡単なプログラミングガイドでは、HTML ページで角の丸いテーブルを作成するための CSS スタイルについて説明します。

CSS を使用して角の丸い HTML テーブルを作成する

画像、テーブル、または div セグメントの角を丸くするプロパティは border-radius です。このプロパティは、テーブルなどの HTML 要素の角の半径を設定します。

以下の例を見てみましょう。

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

この CSS スタイリングでは、テーブル td、th、table などのさまざまなコンポーネントにさまざまなスタイルを適用しました。

最初に適用したスタイルは、ベタ黒 1px の border プロパティで、次に 10px の境界線半径を適用しました。このプロパティは、テーブルのすべての境界線を丸みを帯びた形状にします。

次に、サイズ 1px の黒色のすべてのセルに境界線を適用しました。 HTML コードは次のようになります。

<body>
<table>
    <thead>
    <tr>
        <th>Table </th>
        <th>Header</th>
        <th>Row</th>
    </tr>
    </thead>
    <tr>
        <td>sample</td>
        <td>text</td>
        <td>sample</td>
    </tr>
    <tr>
        <td>text</td>
        <td>sample</td>
        <td>text</td>
    </tr>
</table>
</body>

このテーブルには、ヘッダー行とサンプルデータ用の 2つの行があります。

丸みを帯びた角の数は、提供されているサイズによって異なります。したがって、HTML テーブルの角を丸くする方法がわかります。