CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。WordPressで使用する際の注意点も。
INDEX
tableでborder-radius指定をしても角丸にならない!
- 特にWordPressなどを使っている場合、border-collapse: collapse; とデフォルトで設定されいることがあります。
- border-radiusを使って角丸にする場合、border-collapse: separate; と指定する必要があります。
- 角丸にならない場合は、<table>タグに対して追記してください。(以下の例では追記しています。)
tableを角丸表にする
borderで枠線を引き、border-radiusで角丸にする。
1行目1列目 | 1行目2列目 | 1行目3列目 |
2行目1列目 | 2行目2列目 | 2行目3列目 |
3行目1列目 | 3行目2列目 | 3行目3列目 |
style属性で記述
<table style="border-collapse: separate; width: 80%; margin: auto; border: solid 20px #404040; border-radius: 20px; text-align: center;"> <tbody> <tr> <td>1行目1列目</td> <td>1行目2列目</td> <td>1行目3列目</td> </tr> <tr> <td>2行目1列目</td> <td>2行目2列目</td> <td>2行目3列目</td> </tr> <tr> <td>3行目1列目</td> <td>3行目2列目</td> <td>3行目3列目</td> </tr> </tbody> </table> |
正確な角丸表を作成する
上記の表では四隅の内側が直角になっている。内側についても角丸になるよう、設定する。そのためには、四隅の<td>の丸みを設定する。wordpressなどにおいては各セルについて背景色がが指定されているためにこのようにしなければんらないわけです。
1行目1列目 | 1行目2列目 | 1行目3列目 |
2行目1列目 | 2行目2列目 | 2行目3列目 |
3行目1列目 | 3行目2列目 | 3行目3列目 |
style属性で記述
<table style="border-collapse: separate; border: solid 4px #404040; border-radius: 20px; text-align: center;"> <tbody> <tr> <td style="border-radius: 20px 0 0 0;">1行目1列目</td> <td>1行目2列目</td> <td style="border-radius: 0 20px 0 0;">1行目3列目</td> </tr> <tr> <td>2行目1列目</td> <td>2行目2列目</td> <td>2行目3列目</td> </tr> <tr> <td style="border-radius: 0 0 0 20px;">3行目1列目</td> <td>3行目2列目</td> <td style="border-radius: 0 0 20px 0;">3行目3列目</td> </tr> </tbody> </table> |
border-radius : 左上 右上 左下 右下 の順でborderの丸みを指定する。
<td>で四隅の丸みを設定しない(tableの丸みのみ)場合は以下のように表示されてしまう。
1行目1列目 | 1行目2列目 | 1行目3列目 |
2行目1列目 | 2行目2列目 | 2行目3列目 |
3行目1列目 | 3行目2列目 | 3行目3列目 |
※<tbody>,<tr>,<td>についてbackgroundを指定していない場合は<table>のborder-radius指定のみで角丸表は完成します。ただし、この方法では後にbackgroundを指定する際に修正が必要になり面倒です。四隅の<td>について、border-radiusで指定することを推奨します。
角丸20pxの<table>を作成する方法
- <table>についてborder-radius:20px と指定する
- 左上の<td>について border-radius: 20px 0 0 0; と指定
- 右上の<td>について border-radius: 0 20px 0 0; と指定
- 左下の<td>について border-radius: 0 0 0 20px; と指定
- 右下の<td>について border-radius: 0 0 20px 0; と指定
汎用性を持たせた角丸表スタイルシート
1行目1列目 | 1行目2列目 | 1行目3列目 |
2行目1列目 | 2行目2列目 | 2行目3列目 |
3行目1列目 | 3行目2列目 | 3行目3列目 |
スタイルシートで記述
<table class="round-corner-table"> <tbody> <tr> <td>1行目1列目</td> <td>1行目2列目</td> <td>1行目3列目</td> </tr> <tr> <td>2行目1列目</td> <td>2行目2列目</td> <td>2行目3列目</td> </tr> <td>3行目1列目</td> <td>3行目2列目</td> <td>3行目3列目</td> </tr> </tbody> </table> .round-corner-table{ border-collapse: separate; border: solid 4px #404040; border-radius: 20px; text-align: center; } .round-corner-table tr:first-child td:first-child{ /* 最初のtr(行) かつ、最初の td(列) つまり、1行目1列目に適用*/ border-radius: 20px 0 0 0; /* 左上から指定してゆく */ } .round-corner-table tr:first-child td:last-child{ /* 最初のtr(行) かつ、最後の td(列) つまり、1行目3列目に適用*/ border-radius: 0 20px 0 0; } .round-corner-table tr:last-child td:first-child{ /* 最後のtr(行) かつ、最初の td(列) つまり、3行目1列目に適用*/ border-radius: 0 0 0 20px; } .round-corner-table tr:last-child td:last-child{ /* 最後のtr(行) かつ、最後の td(列) つまり、3行目3列目に適用*/ border-radius: 0 0 20px 0; } |
※この方法で記述すれば、行や列が増えても問題なく角丸表を作成できる。ただし、<th>を用いる際は<th>について指定する必要がありますので注意が必要です。
caption、thを使用している場合の角丸表
borderで枠線を引き、border-radiusで角丸にする。<caption>については対象とならない。
農場 | ニンジン | キャベツ |
---|---|---|
みどり農場 | 400 | 120 |
きいろ農場 | 100 | 300 |
合計 | 500 | 420 |
style属性で記述
<table style="border-collapse: separate; border: solid 4px #404040; border-radius: 20px; text-align: center;"> <caption>野菜の栽培票</caption> <thead> <tr> <th style="border-radius: 20px 0 0 0;">農場</th> <th>ニンジン</th> <th style="border-radius: 0 20px 0 0;">キャベツ</th> </tr> </thead> <tbody> <tr> <td>みどり農場</td> <td>400</td> <td>120</td> </tr> <tr> <td>きいろ農場</td> <td>100</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <th style="border-radius: 0 0 0 20px;">合計</th> <td>500</td> <td style="border-radius: 0 0 20px 0;">420</td> </tr> </tfoot> </table> |
対象要素の概要
table関連の要素
table tr td 表組み コピペで使えるHTML+CSS
テーブル表を作成するtable、trといった要素について解説。どちらが行でどちらが列かもわかりやすく。行と列の結合をするためのcolspan、rowspan属性の説明も。
caption th thead tfoot 表に意味を持たせる コピペで使えるHTML+CSS
テーブル表のcaptionやthead、tfoot、そしてth要素について使用すべき状況はどんな時かなどを解説。headers属性についても。
使用するCSSの概要
border-collapse
border-collapse セル境界線の表示形式 コピペで使えるHTML+CSS
table要素を調整するborder-collapseプロパティの仕組みを解説。separateとcollapseとではどのように表記が変わるのか?borderの数値をどのように設定すべきなのか?具体的にテーブルを表示して比較説明します。
border
border 枠線の表示 コピペで使えるHTML+CSS
CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。
border-radius
border-radius 角を丸くする コピペで使えるHTML+CSS
CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。