テーブルというのは、このようなやつです。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
そして角を丸くするならborder-radiusと思うかも知れませんが・・・ただborder-radiusを指定しても変わりません。
今回は、それを解決する方法を解説していきます。
（有料になっていたらすいません🙇♂️）
table（テーブル）に角丸が効かない原因は『border-collapse』
まずは先ほどのサンプルのコードですが、こちらになります。
<table>
<tbody>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</tbody>
</table>table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}今回は、要素の指定をしやすくするため、theadはありません。
この場合、tableにborder: 1px solid black;は不要ですが、後で角丸にするために必要なので書いておきます。
そして、ここでtableにborder-radiusを書いても、何も変わりません。原因は、border-collapse: collapse;です。
border-collapseプロパティとは？
border-collapseは、テーブルのセル境界線の表示方法を制御するCSSプロパティです。このプロパティを使用することで、テーブルの見た目をより洗練されたものにすることができます。border-collapseプロパティは、table要素に対してのみ適用されます。
そして、指定できる値は2つあります。
- collapse: 隣接するセルの境界線を1本の線に結合します。
- separate: デフォルト値で、各セルの境界線を個別に表示します。
ちなみに、デフォルト値（何も書かない）場合は、こうなります。
See the Pen
table（border-collapseなし） by junpei (@junpei-sugiyama)
on CodePen.
セル同士に隙間ができてしまいます。
なので最初のサンプルでは、border-collapse: collapse;を書いて隙間を埋めましたが、角丸にできない原因はこいつです。
table（テーブル）を角丸にする方法
それでは、border-collapse: collapse;を書かないでborder-radiusを書けばいいかというと、それだけでは上手くいきません。
そうすると、このようになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
border-radiusが適用されたのはtableだけなので、その内側の線は変わっていません。
四隅のthの外側の角にborder-radius
そこで、四隅のthの角だけ、border-radiusを指定します。
指定するのは、以下になります。
- 左上のセルの左上の角
- 右上のセルの右上の角
- 右下のセルの右下の角
- 左下のセルの左下の角
要素の指定方法は、HTMLの構成によって異なりますが、今回は以下になります。
- 左上のセルの左上の角: table tr th:first-child
- 右上のセルの右上の角: table tr th:last-child
- 右下のセルの右下の角: table tr:last-child td:last-child
- 左下のセルの左下の角: table tr:last-child td:first-child
しかし、四隅のセル全体にborder-radiusを指定してしまうと、こうなります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
このコードはこちら。
table tr th:first-child,
table tr th:last-child,
table tr:last-child td:last-child,
table tr:last-child td:first-child {
border-radius: 10px;
}なので、少し手間ですが1つずつ外側の角にだけ、border-radiusを指定します。
コードはこちら。
table tr th:first-child {
border-radius: 10px 0 0 0; /* 左上の角だけ10px */
}
table tr th:last-child {
border-radius: 0 10px 0 0; /* 右上の角だけ10px */
}
table tr:last-child td:last-child {
border-radius: 0 0 10px 0; /* 右下の角だけ10px */
}
table tr:last-child td:first-child {
border-radius: 0 0 0 10px; /* 左下の角だけ10px */
}border-radiusは、border-radius: 左上 右上 右下 左下;となります。
また、この書き方でもOKです。
table tr th:first-child {
border-top-left-radius: 10px; /* 左上の角 */
}
table tr th:last-child {
border-top-right-radius: 10px; /* 右上の角 */
}
table tr:last-child td:last-child {
border-bottom-right-radius: 10px; /* 右下の角 */
}
table tr:last-child td:first-child {
border-bottom-left-radius: 10px; /* 左下の角 */
}サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これで四隅の外側だけ角丸になりましたが、まだ隙間が空いています。
border-spacing: 0で隙間をなくす
隙間をなくすには、通常border-collapse: collapse;を使うと思いますが、これを使うとborder-radiusが効かなくなります。
そこで、tableにborder-spacing: 0;を指定することで、隙間を0にすることができます。
追加するコードはこちら。
table {
border-spacing: 0;
}サンプルはこちら。
See the Pen
table（角丸失敗4） by junpei (@junpei-sugiyama)
on CodePen.
これで完成したかのように見えますが・・・tableとth / tdの線がくっついているので、1px＋1pxで2pxと太くなっています。
【完成】borderの指定を変えて1pxにする
今回は1pxにしたいので、borderの書き方を変えます。
borderだけ書きますが、元はこちら。
table {
border: 1px solid black;
}
th,
td {
border: 1px solid black;
}table、th、td全て同じ指定で全方向に1pxになっています。
これを、このようにします。
table {
border-left: 1px solid black;
border-top: 1px solid black;
}
th,
td {
border-bottom: 1px solid black;
border-right: 1px solid black;
}tableとth / tdが重ならないように、tableは上と左だけ、th / tdは下と右だけに線を指定しています。
こちらがサンプルです。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これでようやく完成しました。
まとめ
今回は、tableで角丸を作る方法を解説しました。
border-collapseはデフォルトでseparateなので書きませんでしたが、リセットCSSにborder-collapse: collapse;と書かれているかも知れないので、ちゃんとborder-collapse: separate;と書いた方がいいかも知れません。
以上になります。
