table 角丸の表を作成する内側の壁紙問題も対応コピペで使えるHTML+CSS

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

INDEX

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

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>