ここでは、tableの角を丸くする方法についてお話させていただきます。最初にお話しておきますが、tableの角を丸くするのは少しやっかいです。通常の角丸に効くプロパティborder-radiusを設定すれば済むという話ではありませんので、少し話が長くなってしまうことをご了承ください。
最初に結論だけ知りたい方のためにコードを掲載しておきます。下記をご覧ください。
ボタンで表示を切り替えてご覧ください。
HTML
<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> |
CSS
-webkit-border-radius:10px; |
border-bottom:1px solid #666; |
table tbody tr:last-child th, |
table tbody tr:last-child td{ |
border-left:1px solid #666; |
角丸テーブルを作成する手順
それでは早速、角丸にしていく手順を見ていきましょう。
はじめに、これはborder-radius:10px;だけをtableに指定した状態です。何の変化もありません。原因はtableをデザインする際にほとんどの方が設定するborder-collapse:collapse;というborderを一本化する設定があるために、角が丸くならないのです。
これがborder-collapse: collapse;を削除した状態です。角が丸くなってくれましたが、線が２重になってしまいました。border-collapse: collapse;で線を１本化させていた設定が解除されたためです。とりあえず、tableの中にある線を１本にするためにborderを次のように設定してみましょう。
CSS
border-bottom:1px solid #666; |
border-left:1px solid #666; |
border-left:1px solid #666; |
内側の線はとりあえず１本になりましたが、一番下の線が２本なので、last-childを使って線を非表示にします。
CSS
一番下の線を消しました。次に線のところにある余白を削除します。
border-spacing: 0;によってborderの余白（space）をゼロに設定しました。今度は、tableの四つ角がはみ出してしまったので、これをoverflow:hidden;で直します。
ようやく角丸テーブルの完成です。いかがだったでしょうか？思っていたよりもいろんなプロパティを調整しないといけないので、ちょっと難しかったかもしれません。これを機会に分からなかったプロパティやセレクタについて学んでみるのもいいですね。
最後までお読みいただきましてありがとうございました。
2017.09.13ここではHTMLを覚え始めたばかりの方がテーブルレイアウトを覚えるために、私の自己流の覚え方をご紹介します。tableの組み方を覚える目的で話の中に一部フィクションが含まれていますのでご了承ください。
テーブルの基本的な作り方
では、さっそくテーブルを...
2017.09.13テーブルで表を作成していて、セルを結合したいときってありますよね。ここではその方法についてお話していきます。
th要素・td要素を横に結合させる方法
まずは、セルを横に結合させる方法です。セルの横の結合は、下記の属性を結合したいthタグまたはthタグに...
2017.11.23ここではtableレイアウトのサンプルをご紹介します。デザインの参考にしてください。
線だけのシンプルなテーブル
See the Pen table01 by kenichi (@ken81) on CodePen.
CSS
[css]...
