【CSS/html】tableを角丸にする方法（コピペでOK）

「tableを角丸にしたいんだけど、うまくいかない！」

tableを角丸にするにはdivやimgと違い、複雑な手順が必要です。

tableを角丸にする方法を解説します。

完成形

下記のようにtableを角丸にできます。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

下記CSSをコピーしてcssファイルに貼るか、htmlに<style></style>タグを作ってその間に貼りましょう。

CSS

.radius-table{
    border-radius: 10px;
    border-spacing: 0;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}
.radius-table tr>*{
    padding: 5px 10px;
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
.radius-table tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
}
.radius-table tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 10px 0;
}

tableに「class="radius-table"」をつけましょう。

html

<table border="1" class="radius-table">
    <tr>
        <th>セル</th><th>セル</th><th>セル</th><th>セル</th><th>セル</th>
    </tr>
    <tr>
        <th>セル</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
    </tr>
    <tr>
        <th>セル</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
    </tr>
</table>

ポイント

下記よりポイントを解説します。

tableにborder-radius

border-radiusは角丸にするCSSです。

tableにborder-radiusを指定しましょう。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

CSS（htmlは上記と同じ）

.radius-table{
    border-radius: 10px;
}

4つ角のtdまたはthの角方向にborder-radius

tableにborder-radiusを指定しただけでは内側にあるセルが角丸になりません。

以下のセルの角を角丸にする必要があります。

4つ角のtdまたはthを指定する

左上や右下のセルを指定するには「:first-child」や「:last-child」を使います。

左上のセルは、1つめのtrの1つめのthまたはtdです。

1つめのtrは「tr:first-child」で指定できます。

thまたはtdについては、trの直下にはthかtdしかないため「tr>*」で指定できます。

trの1つめの子要素は「tr>*:first-child」で指定できます。

よって左上のセルは「tr:first-child>*:first-child」で指定できます。

同様に4つ角のセルは下記のように指定できます。

一部の角だけ角丸にする

border-radiusは4つ角それぞれに値を指定できます。

左上から時計回りと覚えましょう。

これを使って、左上だけ、右下だけ角丸という風に指定します。

組み合わせる

上記を組み合わせると下記のようになります。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

.radius-table{
    border-radius: 10px;
}
.radius-table tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
}
.radius-table tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 10px 0;
}

border-collapse:collapseを使わない

セルとセルの間に隙間があるため、これをなくして1pxの線にしたいところです。

これを実現するカンタンな方法はtableに「border-collapse:collapse」を指定することです。

上記角丸にしたtableに「border-collapse:collapse」を指定してみましょう。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

このように1pxの線にはなりましたが、角丸が無くなってしまいました。

「border-collapse:collapse」を使うとtableの角丸がなくなってしまいます。

「border-collapse:collapse」を使わずに1pxの線にしましょう。

セルとセルの間に隙間をなくす

tableに「border-spacing:0」を指定するとセルとセルの間に隙間が0になります。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

線が太くていいならこれでもいいですが、1pxの線にする方法を解説します。

1pxの線にする

セルの一方だけ縦線、横線を引き、tableにはその反対側の縦線、横線を引きます。

具体的にはthとtdにborder-rightとborder-bottomを指定し、tableにはborder-leftとborder-topを指定します。

これで線の重複がなくなり1pxの線を引けます。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

.radius-table{
    border-radius: 10px;
    border-spacing: 0;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}
.radius-table tr>*{
    padding: 5px 10px;
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
.radius-table tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
}
.radius-table tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 10px 0;
}

【まとめ】tableを角丸にする方法

tableにborder-radius

4つ角のtdまたはthの角方向にborder-radius

tr:first-child>*:first-child{border-radius: 10px 0 0 0;}
tr:first-child>*:last-child{border-radius: 0 10px 0 0;}
tr:last-child>*:first-child{border-radius: 0 0 0 10px;}
tr:last-child>*:last-child{border-radius: 0 0 10px 0;}

border-collapse:collapseを使わない

• tableにborder-spacing:0を指定
• thとtdにborder-rightとborder-bottomを指定し、tableにはborder-leftとborder-topを指定

以上、tableを角丸にする方法でした。