【HTML／CSS】テーブルを角丸に！thやtdにborder-radiusを指定する方法

RELEASE / 2024.8.5 UPDATE / 2024.08.04

border-radius

table

角丸

border-radiusは要素を角丸にするCSSプロパティです。
ある時、tableタグにborder-collapse:collapseが指定されている表のセルを角丸にしたいと思い、thやtdにborde-radiusを指定しましたが、thやtdで作られたセルは角丸になりませんでした。
そこで少し工夫をして、表のセルを角丸にすることが出来ました。
今回の記事ではその時使ったthやtdで作られたセルをborde-radiusを使って角丸にする方法をご紹介したいと思います。

この記事の目次を表示

1 疑似要素を使う
2 まとめ

疑似要素を使う

まず始めに冒頭でも書いた通り、tableタグにborder-collapse:collapseが指定されているthやtdにborde-radiusを指定してもセルは角丸になりません。

それでは実際に見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

borde-radiusが指定されているのに角丸になりませんね。

そこで、thとtdの疑似要素を作り、その疑似要素にborder-radiusを指定します。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 10px;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border: 1px solid transparent;
    position: relative;
}
table td {
    width: 75%;
    padding: 10px;
    border: 1px solid transparent;
    position: relative;
}
table th::before,
table td::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

border-collapse:collapseされ、セル同士がくっついた状態のままセルを角丸にすることが出来ましたね。
これを実装する際のポイントはthやtdにも白や透明のボーダーを指定することです。
これを指定しないと重なり合う位置だけ線が太くなってしまいます。

実際に見てみるとこんな感じです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

部分的に線の太さが変わっていて違和感を感じますね。

この方法を取り入れる際は、疑似要素だけでなく、thやtdにも白や透明のボーダーを指定するようにします。