ここでは、tableの角を丸くする方法についてお話させていただきます。最初にお話しておきますが、tableの角を丸くするのは少しやっかいです。通常の角丸に効くプロパティborder-radiusを設定すれば済むという話ではありませんので、少し話が長くなってしまうことをご了承ください。
最初に結論だけ知りたい方のためにコードを掲載しておきます。下記をご覧ください。
ボタンで表示を切り替えてご覧ください。
See the Pen kadomaru-table06 by kenichi (@ken81) on CodePen.
HTML
<table> <tr><th></th><th>項目A</th><th>項目B</th><th>項目C</th></tr> <tr><th>項目1</th><td>A-1</td><td>B-1</td><td>C-1</td></tr> <tr><th>項目2</th><td>A-2</td><td>B-2</td><td>C-2</td></tr> <tr><th>項目3</th><td>A-3</td><td>B-3</td><td>C-3</td></tr> </table>
CSS
table{
margin:0 auto;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border:1px solid #666;
border-spacing: 0;
overflow:hidden;
}
td,th{
border-bottom:1px solid #666;
}
td,th{
padding:10px;
}
th{
background:#cecece;
}
table tbody tr:last-child th,
table tbody tr:last-child td{
border-bottom: none;
}
th + th,td{
border-left:1px solid #666;
}
角丸テーブルを作成する手順
それでは早速、角丸にしていく手順を見ていきましょう。
See the Pen kadomaru-table01 by kenichi (@ken81) on CodePen.
はじめに、これはborder-radius:10px;だけをtableに指定した状態です。何の変化もありません。原因はtableをデザインする際にほとんどの方が設定するborder-collapse:collapse;というborderを一本化する設定があるために、角が丸くならないのです。
See the Pen kadomaru-table02 by kenichi (@ken81) on CodePen.
これがborder-collapse: collapse;を削除した状態です。角が丸くなってくれましたが、線が２重になってしまいました。border-collapse: collapse;で線を１本化させていた設定が解除されたためです。とりあえず、tableの中にある線を１本にするためにborderを次のように設定してみましょう。
See the Pen kadomaru-table03 by kenichi (@ken81) on CodePen.
CSS
td,th{
border-bottom:1px solid #666; /* ヨコ線はbottomだけを表示 */
}
td{
border-left:1px solid #666; /* タテ線はleftだけを表示 */
}
th + th{
border-left:1px solid #666; /* th要素は一番左のセルの線は不要なので隣接セレクタを活用します。 */
}
内側の線はとりあえず１本になりましたが、一番下の線が２本なので、last-childを使って線を非表示にします。
See the Pen kadomaru-table04 by kenichi (@ken81) on CodePen.
CSS
table tr:last-child th,
table tr:last-child td{
border-bottom: none;
}
一番下の線を消しました。次に線のところにある余白を削除します。
See the Pen kadomaru-table05 by kenichi (@ken81) on CodePen.
border-spacing: 0;によってborderの余白（space）をゼロに設定しました。今度は、tableの四つ角がはみ出してしまったので、これをoverflow:hidden;で直します。
See the Pen kadomaru-table06 by kenichi (@ken81) on CodePen.
ようやく角丸テーブルの完成です。いかがだったでしょうか？思っていたよりもいろんなプロパティを調整しないといけないので、ちょっと難しかったかもしれません。これを機会に分からなかったプロパティやセレクタについて学んでみるのもいいですね。
最後までお読みいただきましてありがとうございました。
