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

最終更新日：2024-11-22

公開日：2024-11-22

ページ内に広告が含まれています。

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

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要素にborder、border-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;
}