角丸のtable(テーブル)にする方法について【CSS】

最終更新日:

公開日:2024-11-22

ページ内に広告が含まれています。
角丸のtable(テーブル)にする方法について【CSS】

デザインによってはtable(テーブル)要素が角丸になっている場合があります。divimgborder-radiusプロパティで簡単にできますが、table要素はそのままでは角丸にはできません。
今回は、table要素を角丸にする方法について詳しく解説していきます。

tableを角丸に出来ない原因について

table要素を角丸にできない原因はborder-collapse: collapse;です。
これが指定されているとborder-radiusプロパティが効きません。角丸にするにはborder-collapse: separate;を指定する必要があります。
指定した覚えが無くても、リセットCSSなどで指定されている場合がありますので注意してください。

border-collapseプロパティについての詳しい解説は、隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて【CSS】をご覧ください。

tableを角丸にする方法

table要素を角丸にするには、先程のborder-collapseプロパティを含めて以下の内容を指定する必要があります。

  • table要素にborder-collapse: separate;を指定する
  • table要素にborder-spacing: 0;を指定する
  • table要素にborder、border-radiusプロパティを指定する
  • table要素にoverflowプロパティを指定する
  • 最終行以外のth・td要素にborder-bottomプロパティを指定する
  • 最初の列以外のth・td要素にborder-leftプロパティを指定する

それでは、各項目を解説していきます。

table要素にborder-collapse: separate;を指定する

border-collapseプロパティは、セル同士の間隔を空けるか空けないかを指定できるプロパティとなります。
今回は、border-radiusプロパティを有効にする為に、セル同士の間隔を空ける指定(separate)とします。

border-collapseプロパティについての詳しい解説は、隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて【CSS】をご覧ください。

table {
    border-collapse: separate;
}
見出し 見出し
内容 内容
内容 内容

※上記例では、分かりやすいようにth・td要素にborderプロパティを追加しています。

table要素にborder-spacing: 0;を指定する

border-spacingプロパティはセル同士の間隔の大きさを指定する事が出来るプロパティです。
今回は、セル同士の間隔は空けませんので0と指定します。

border-spacingプロパティについての詳しい解説は、テーブルのセル同士の間隔を指定するborder-spacingプロパティの使い方【CSS】をご覧ください。

table {
    border-collapse: separate;
    border-spacing: 0;
}
見出し 見出し
内容 内容
内容 内容

※上記例では、分かりやすいようにth・td要素にborderプロパティを追加しています。

table要素にborder、border-radiusプロパティを指定する

続いて、table要素にborderborder-radiusプロパティを指定して角丸の枠線を追加します。

table {
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
}
見出し 見出し
内容 内容
内容 内容

table要素にoverflowプロパティを指定する

先ほど追加したtable要素の角丸の枠線は、th・td要素に背景色が指定されているとはみ出してしまいますので、overflow: hidden;ではみ出した部分を非表示にします。

table {
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
見出し 見出し
内容 内容
内容 内容

最終行以外のth・td要素にborder-bottomプロパティを指定する

table要素のすべての方向にborderプロパティを指定しているので、最終行以外のth・td要素にborder-bottomプロパティを指定します。

table {
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
tr:not(:last-child) th,
tr:not(:last-child) td {
    border-bottom: 1px solid #F2F2F2;
}
見出し 見出し
内容 内容
内容 内容

最初の列以外のth・td要素にborder-leftプロパティを指定する

こちらもtable要素のすべての方向にborderプロパティを指定しているので、最初の列以外のth・td要素にborder-leftプロパティを指定します。

table {
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
tr:not(:last-child) th,
tr:not(:last-child) td {
    border-bottom: 1px solid #F2F2F2;
}
tr th:not(:first-child),
tr td:not(:first-child) {
    border-left: 1px solid #F2F2F2;
}
見出し 見出し
内容 内容
内容 内容

以上で角丸テーブルが作成できますが、thead・tbody要素やcolspan・rowspanなどのテーブルを構成する要素によっては適応するCSSも違ってきますので、その時々によって変更してみてください。

さいごに

いかがでしたでしょうか。
今回は、角丸のtable(テーブル)にする方法について解説しました。
デザインによっては使用する事もありますので、要点だけは把握しておくようにしてください。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP