概要 ▶ Something wonderful arrived in the mail today. by simplebitsdan最近、ウェブデザインで角丸が使える機会が増えてきたのでちょこちょこ指定して使っています（Internet ExplorerがあるのでjQueryも利用しています）。そんな中、うかさんのツイートで以下のページのリンクが流れてきたので見てみたら、なんかテーブルの角丸で色々ご苦労
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
Something wonderful arrived in the mail today. by simplebitsdan
最近、ウェブデザインで角丸が使える機会が増えてきたのでちょこちょこ指定して使っています（Internet ExplorerがあるのでjQueryも利用しています）。
そんな中、うかさんのツイートで以下のページのリンクが流れてきたので見てみたら、なんかテーブルの角丸で色々ご苦労されている感じでした。
これを読んでいたら角丸のテーブルを使うのが面倒になったのですが、Adobe InDesign使いならそんなことはありませんよね！
ってタイトルだけでオチがわかった人はこの後は読まなくても良いです（笑）。
さてInDesign使いがCSS3で角丸のテーブルを作るにはどうするのでしょうか。
実例：HTMLとCSSを設定
早速やってみましょう。先の角丸テーブルを作るページでは、 最終的に 以下の様なHTMLになっていたと思います。
<table class="coder"> <thead> <tr> <th>タイトル</th> <th>著者</th> </tr> </thead> <tbody> <tr> <td>銀河鉄道の夜</td> <td>宮沢賢治</td> </tr>
</tbody></table>
これを「<div class="coder-wrapper">」で包みます。
<div class="coder-wrapper"> <table class="coder"> <thead> <tr> <th>タイトル</th> <th>著者</th> </tr> </thead> <tbody> <tr> <td>銀河鉄道の夜</td> <td>宮沢賢治</td> </tr> </table> </div>
CSSは以下の様にします。
元の角丸は6pxでしたが、わかりにくいので10pxにしました。（border-radius: 10px;）
.coder {
border-spacing: 0;
width: 100%;
}
.coder th, .coder td {
padding: 10px;
background: #fff;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.coder th {
background:#e3dcd5;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
color: #69655c;
}
.coder th:last-child, .coder td:last-child {
border-right:none;x
}
.coder tr:last-child td {
border-bottom: none;
}
.coder-wrapper {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 1px 1px #ccc;
border: 1px solid #ccc;
width: 300px;
overflow: hidden;
}
結果
上記のHTML＋CSSで以下の通りになります。（Firefox 10で表示）
実際は元の作例と左上のテカリが違います。わかりますか？
今回作成したものを拡大して掲載します。
元の作例では角丸に沿ってテカリが曲がっています。
他に角丸部分の罫線（border）の太さが微妙に違います。
この違いは個人的にはほとんど問題ないレベルだと思います。
この方法の良い点は、tableタグの外側のdivで角丸を作っているので、中のtableは角丸を意識せず、いつも通り作成すればOKというところです。
これで簡単に角丸のテーブルができますね！
ぜひ試してみて下さい。
解説
tableの外側のdivを角丸にして（border-radius: 10px;）、角丸ではみ出した部分を隠す設定（overflow: hidden;）にしてあります。divの「overflow: hidden;」を書かないと以下の様にtableの角がはみ出した状態になります。
しかし、この「overflow: hidden;」の設定はFirefox・Chrome・Safari・Internet Explorer 9では有効ですが、Operaは無効です。
上記の画像の様に中のtableがはみ出してしまいます。この回避方法はないようです。残念。
この手法はInDesignで表の角を丸くしたい時に行う手法をそのまま踏襲したものです。
InDesignでは空のフレームの内部に表をペーストして、フレームを角丸にするという作業をします。
早くこんなことをしなくても角丸の表が使えるようになれば良いなと思っています。
- 表の角の効果は? （InDesignの勉強部屋 掲示板過去ログより）
Operaに関しての参考ページ
画像を見ているとどうも、
境界線の形状指定であって、画像をどう表示するかとは関係がない
という超斬新な解釈のもとに実装されているような感じだ。
オレのTIPS備忘録: border-radiusの斬新な解釈
まぁ確かに言われればそうなんだけどね。