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

Naila Saad Siddiqui 2023年6月20日 CSS CSS Table
CSS を使用して角の丸い HTML テーブルを作成する

この簡単なプログラミング ガイドでは、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 テーブルの角を丸くする方法がわかります。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe