tableタグのテーブル（表）を角丸にしようとすると上手くいかないことがあります。
自分も何度かその状態になって、その度そうだったと思いだしては対応していました。そろそろ自分のためにもやり方を残しておこうと思います。
スポンサーリンクtableタグ（表・テーブル）を角丸にする方法
まず、普通に設定した状態から対応してみましょう。
下記のようなhtmlを例に角丸にしていきますね。
<table class="radius">
<thead>
<tr>
<th>氏名</th>
<th>身長(cm)</th>
<th>体重(kg)</th>
</tr>
</thead>
<tbody>
<tr>
<td>太郎</td>
<td>160</td>
<td>50</td>
</tr>
<tr>
<td>次郎</td>
<td>170</td>
<td>55</td>
</tr>
</tbody>
</table>
| 氏名 | 身長(cm) | 体重(kg) |
|---|---|---|
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
tableにborder-radiusを設定
.radius {
border-radius: 20px;
}
上記cssを適応した結果が下記になりますが、角丸になっていません。
| 氏名 | 身長(cm) | 体重(kg) |
|---|---|---|
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
では、まず第一の問題点です。それは、border-collapseがcollapseになっていることです。
同じような設定で角丸になった方は既にborder-collapseがseparateとなっている可能性が高いですので、次に進んでください。
tableのborder-collapseに「separate」を設定
.radius {
border-collapse: separate;
border-spacing: 0;
border-radius: 20px;
}
border-collapse: separate;を加えたものが下記になります。
※「separate」を設定するとセル間にスペースができるので「border-spacing: 0;」で0にする必要があります
| 氏名 | 身長(cm) | 体重(kg) |
|---|---|---|
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
tableタグ（テーブル）自体は角丸になりましたが、中のセル（thやtd）の背景が角丸になっておらずはみ出ている状態です。これではまだ正常な角丸とは言えませんので、もう一つ手を加えます。
これは正直力技なのですが…、四隅つまり左上、右上、左下、右下のセルに対してそれぞれ角丸を設定します。
四隅（左上、右上、左下、右下）のセルに角丸を設定
左上は左上が角丸になるように、右上は右上が、左下は左下が、右下は右下が角丸になるよう設定します。
少し説明すると、まず左上、右上については下記のようなセレクタで対応できます。
- まず、1行目はtheadタグなので「thead 」が必要
- 左上は1番目のセル（th）なので、「thead th:first-child」
- 右上に最後のセル（th）なので、「thead th:last-child」
次に左下、右下については下記のようなセレクタで対応できます。
- まず、2行目以降はtbodyタグなので「tbody 」が必要
- 左下、右下は最終行なので、「tbody tr:last-child」が必要
- 左下は1番目のセル（td）なので、「tbody tr:last-child td:first-child」
- 右下に最後のセル（td）なので、「tbody tr:last-child td:last-child」
実際に設定した値が下記CSSになります。
.radius {
border-collapse: separate;
border-spacing: 0;
border-radius: 20px;
}
/* 左上 */
.radius thead th:first-child {
border-radius: 20px 0 0 0;
}
/* 右上 */
.radius thead th:last-child {
border-radius: 0 20px 0 0;
}
/* 左下 */
.radius tbody tr:last-child td:first-child {
border-radius: 0 0 0 20px;
}
/* 右下 */
.radius tbody tr:last-child td:last-child {
border-radius: 0 0 20px 0;
}
ようやくtableタグを角丸にすることができました。
| 氏名 | 身長(cm) | 体重(kg) |
|---|---|---|
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
border-collapse: separate;によって、内部のborderが太くなっている
実は「border-collapse: separate;」を設定したため、borderが重ならず2本分になってしまっています。よって、きれいにするためには、上もしくは下、左もしくは右の一方のborderが不要になります。
よって、下記を追記すれば、borderの幅は同じになります。
/* 内部の上のborderを取りやめ。設定しているborderを削除でもOK */
.radius tbody td {
border-top-width: 0;
}
/* 左のborderを取りやめ。設定しているborderを削除でもOK */
.radius th,
.radius td {
border-left-width: 0;
}
/* ただし、一番左は必要 */
.radius th:first-child,
.radius td:first-child {
border-left-width: 1px;
}
| 氏名 | 身長(cm) | 体重(kg) |
|---|---|---|
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
参考：すべてがtbodyに属している場合
<table class="radius">
<tbody>
<tr>
<td>太郎</td>
<td>160</td>
<td>50</td>
</tr>
<tr>
<td>次郎</td>
<td>170</td>
<td>55</td>
</tr>
<tr>
<td>三郎</td>
<td>155</td>
<td>55</td>
</tr>
</tbody>
</table>
上記のhtmlのようにすべてtbodyに属している場合は下記のようなcssで対応できます。
.radius {
border-collapse: separate;
border-spacing: 0;
border-radius: 20px;
}
/* 左上 */
.radius tr:first-child td:first-child {
border-radius: 20px 0 0 0;
}
/* 右上 */
.radius tr:first-child td:last-child {
border-radius: 0 20px 0 0;
}
/* 左下 */
.radius tr:last-child td:first-child {
border-radius: 0 0 0 20px;
}
/* 右下 */
.radius tr:last-child td:last-child {
border-radius: 0 0 20px 0;
}
/* 上のborderを取りやめ。設定しているborderを削除でもOK */
.radius td {
border-top-width: 0;
}
/* ただし、一番上は必要 */
.radius tr:first-child td {
border-top-width: 1px;
}
/* 左のborderを取りやめ。設定しているborderを削除でもOK */
.radius td {
border-left-width: 0;
}
/* ただし、一番左は必要 */
.radius td:first-child {
border-left-width: 1px;
}
こちらも正常に角丸になりました。
| 太郎 | 160 | 50 |
| 次郎 | 170 | 55 |
| 三郎 | 155 | 55 |
まとめ
- tableタグにborder-radiusを設定する
- tableタグはborder-collapse: separate;の必要がある
- tableタグはborder-spacing: 0;が必要
- 左上、右上、左下、右下のセルもそれぞれ左上、右上、左下、右下を角丸にする必要がある
設定の仕方はtableの組み方によって異なります。CSSセレクタでうまく設定しましょう - テーブルの外枠ではなく内枠は「separate」によって、線が重複してしまうので、不要なborderを削除する必要がある
設定の仕方はtableの組み方によって異なります。CSSセレクタでうまく設定しましょう
スポンサーリンク