角の丸いテーブルを表示するには

• トップ
• How To
• 角の丸いテーブルを表示するには

• thead, tbody, tfoot を使用しない場合
• thead, tbody, tfoot を使用する場合

thead, tbody, tfoot を使用しない場合

角の丸いテーブルの実現方法を下記に示します。

• 左上/右上/左下/右下セルの左上/右上/左下/右下を boder-*-*-radius で角を丸めます。
• border-collapse:collapse; を指定すると何故か枠線の角が丸まらないので仕方なく border-collapse は separate のままにして、代わりに border-spacing を 0 にします。
• border-spacing を 0 にすると各セルの枠線が隣り合いに二重になって太くなってしまうため、通常セルは右側と下側のみ枠線を引き、最後に1行目の上部、1列目の左側に枠線を引いています。

.my-round-table { border-spacing: 0; }
.my-round-table > * > tr > th { background-color: #ddf; }
.my-round-table > * > tr > td { text-align: center; }
.my-round-table > * > tr > *  { width: 6rem; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.my-round-table > * > tr:first-child > *:first-child { border-top-left-radius:     .5rem; }
.my-round-table > * > tr:first-child > *:last-child  { border-top-right-radius:    .5rem; }
.my-round-table > * > tr:last-child  > *:first-child { border-bottom-left-radius:  .5rem; }
.my-round-table > * > tr:last-child  > *:last-child  { border-bottom-right-radius: .5rem; }
.my-round-table > * > tr:first-child > *  { border-top:  1px solid #999; }
.my-round-table > * > tr > *:first-child  { border-left: 1px solid #999; }

<table class="my-round-table">
  <tr><th></th><th>列A</th><th>列B</th><th>列C</th></tr>
  <tr><th>行1</th><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><th>行2</th><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><th>行3</th><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

thead, tbody, tfoot を使用する場合

thead, tbody, tfoot を使用する場合、下記の様に thead, tbody, tfoot それぞれの角が丸まってしまい、thead, tbody, tfoot 間の枠線も太くなってしまいます。

これを防ぐには上記の CSS を下記の様に改善します。

• テーブルが thead を含んでいる場合は thead の角を、含んでいない場合は tbody の角を丸めます。
• テーブルが tfoot を含んでいる場合は tfoot の角を、含んでいない場合は tbody の角を丸めます。
• 最後の上部枠線も thead がある場合とない場合で処理を分けています。

.my-round-table { border-spacing: 0; }
.my-round-table > * > tr > th { background-color: #ddf; }
.my-round-table > * > tr > td { text-align: center; }
.my-round-table > * > tr > *  { width: 6rem; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.my-round-table:has(thead)       > thead > tr:first-child > *:first-child,
.my-round-table:not(:has(thead)) > tbody > tr:first-child > *:first-child { border-top-left-radius:     .5rem; }
.my-round-table:has(thead)       > thead > tr:first-child > *:last-child,
.my-round-table:not(:has(thead)) > tbody > tr:first-child > *:last-child  { border-top-right-radius:    .5rem; }
.my-round-table:has(tfoot)       > tfoot > tr:last-child  > *:first-child,
.my-round-table:not(:has(tfoot)) > tbody > tr:last-child  > *:first-child { border-bottom-left-radius:  .5rem; }
.my-round-table:has(tfoot)       > tfoot > tr:last-child  > *:last-child,
.my-round-table:not(:has(tfoot)) > tbody > tr:last-child  > *:last-child  { border-bottom-right-radius: .5rem; }
.my-round-table:has(thead)       > thead > tr:first-child > *,
.my-round-table:not(:has(thead)) > tbody > tr:first-child > *  { border-top:  1px solid #999; }
.my-round-table > * > tr > *:first-child  { border-left: 1px solid #999; }