CSS

テーブルを角丸にする方法

ここでは、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;を削除した状態です。角が丸くなってくれましたが、線が2重になってしまいました。border-collapse: collapse;で線を1本化させていた設定が解除されたためです。とりあえず、tableの中にある線を1本にするために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要素は一番左のセルの線は不要なので隣接セレクタを活用します。 */
}

内側の線はとりあえず1本になりましたが、一番下の線が2本なので、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.

ようやく角丸テーブルの完成です。いかがだったでしょうか?思っていたよりもいろんなプロパティを調整しないといけないので、ちょっと難しかったかもしれません。これを機会に分からなかったプロパティやセレクタについて学んでみるのもいいですね。

最後までお読みいただきましてありがとうございました。



最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP