【css】tableに角丸(border-radius)を設定できないときの問題解決方法

talbe要素の四隅を角丸にするとき困った経験はないでしょうか？tableに対してborder-radiusを指定しているのに、なぜか角丸にならないといった問題です。実は、tabaleに対して角丸（border-radius）を設定するときはいくつかの注意点があるのです。今回はそれらの問題に対応し、tableに角丸を設定する方法をご紹介いたします。

border-radiusを使って角丸を設定する方法についてはこちらをチェックしてください！

tableに角丸を設定するときの注意点と角丸の設定方法

table要素にborder-radiusを設定するときは、いろいろと注意が必要です。単純にtable要素の四つ角に角丸を設定したいとしても、内包するtr やtd,thなどの要素にborderやbackgroundが適用されていたりする場合は個々に設定してあげる必要があるからです。
さらに、tableの場合ボーダーを重ねることができるborder-collapse: collapse;の指定をすると、border-radiusが使えなくなるという特性があるので、それ以外の方法で指定する必要があります。
ここでは、よくありそうなtableデザインに角丸を設定するサンプルを載せておきますので、よかったら参考にしてみてください。

<table>
<thead>
<tr>
<th>テキスト</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</thead>
<tbody>
<tr>
<th>テキスト</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th>テキスト</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>

table{
	width:100%;
	border-collapse: separate;
	border-radius:20px;
	border-left:2px solid #e95295;
	border-top:2px solid #e95295;
}
table th{
	background-color:rgba(233, 82, 149, 0.3);
	border-bottom:2px solid #e95295;
	border-right:2px solid #e95295;
}
table td{
	border-bottom:2px solid #e95295;
	border-right:2px solid #e95295;
}
table thead th{
	border-radius:18px 0 0 0; 
}
table thead td:last-child{
	border-radius:0 18px 0 0; 
}
table tbody tr:last-child th{
	border-radius:0 0 0 18px; 
}
table tbody tr:last-child td:last-child{
	border-radius:0 0 18px 0; 
}

結果