CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。WordPressで使用する際の注意点も。
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> |
<table>に記述をする。WordPressなどを使っている場合、border-collapse: collapse; とデフォルトで設定されいることがある。border-radiusを使って角丸にする場合、border-collapse: separate; とする必要がある。角丸にならない場合は、追記してほしい。
正確な角丸表を作成する
上記の表では四隅の内側が直角になっている。内側についても角丸になるよう、設定する。そのためには、四隅の<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関連の要素


使用するCSSの概要
border-collapse

border

border-radius
