table 角丸の表を作成するコピペで使えるHTML+CSS

CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。WordPressで使用する際の注意点も。

tableを角丸表にする
1. 正確な角丸表を作成する
汎用性を持たせた角丸表スタイルシート
caption、thを使用している場合の角丸表
対象要素の概要
1. table関連の要素
使用するCSSの概要

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>の丸みを設定する。

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>