CSS3で角丸テーブルを作る

仕事でページを作る必要があり、その際に角丸テーブルを作りましたので、そのやり方をご紹介。

基本的にborder-radiusを使いますので、IE8以下は非対応ですが、IE8以下へはJavascriptライブラリなどで適宜対応してください。

なおここでは、シンプルな3行3列のテーブルを考えています。また前提として、幅100px、高さ30pxとしています。

抑えておきたい角丸テーブルのためのCSS

まずこれだけは抑えておきたいのが、border-collapse:collapse;は書かないことです。collapseにしてしまうと、そもそもborder-radiusが効きません。

なので、デフォルト値であるborder-collapse:separate;を指定します。

table {
border-collapse: separate;
}

線をつけてみる

わかりやすいように、セルに線を引いてみます。線は、右側と下側にのみ引きます。例えば以下の様な感じ。

table tr td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
height: 30px;
width: 100px;
}

線をつけてみる

セル間の隙間を埋める

そもそもborder-collapse:separate;を指定すると、セルの間に隙間ができてしまいます。それをうまく生かせるようなデザインがあるならそれでも良いですが、隙間を埋めたい人も多いはず。

そういう時は、border-spacing:0;を指定します。

table {
border-collapse: separate;
border-spacing: 0;
}

隙間をなくす

これで隙間が無くなります。

上と左側にも線を引く

ないのもなんですので、引きます。これはtable自体に引いてしまいます。

table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

上と左にも線を引く

他にも、tr:first-child tdにborder-top、tr td:first-childにborder-leftを引いても良いでしょう。

角を丸くする

テーブルにborder-radiusを指定するときは、tableタグだけに設定しても、(上記の例だと)実は丸くなりません。
対応する四隅のセルに対して、それぞれ指定します。

テーブル本体

table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-radius: 8px;
}

テーブルセル

table tr:first-child td:last-child {
border-radius: 0 8px 0 0;
}
table tr:last-child td:first-child {
border-radius: 0 0 0 8px;
}
table tr:last-child td:last-child {
border-radius: 0 0 8px 0;
}

ベンダープレフィックスは省いていますが、これで丸くなります。

角丸テーブルの完成

tableタグ自体に線を惹かずに、すべてセルにのみ線を引くのであれば、テーブルにborder-radiusを指定する必要がない代わりに、左上のセルに対して角丸を指定します。

GRC検索順位チェックツール*
順位チェックとサイト管理を1つのツールで!検索順位チェックツールGRC*

スポンサード・リンク

«
 

トラックバックURL

コメントを書き込む