ウェブのあれこれ
ウェブを活用したいひとのためのブログ
CSSでテーブルをデザインする時に気をつけること
2016/03/08 HTML/CSS

CSSでテーブルをデザインする時に気をつけること

テーブルをCSSでデザインするとき、うまいことプロパティを指定しないと思い通りに行かない時があります。そんなときの注意点。

ボーダーや角丸と当てるときは「border-collapse:separate」に

ボーターの指定方法

border-collapseは隣接するセル同士の境界線を重ねるか、間隔を開けるかを指定するプロパティです。
単純な線を引くだけなら、「border-collapse:collapse」でいいのですが、これを指定するとborder-radiusが効かなくなったり、GoogleChromeなどで描画がおかしくなるときがあります。

スタイルを適用するテーブル要素には以下のような指定をするのがオススメです。
table
{
    border-collapse:separate;
    border-spacing:0px;

    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
table th, table td
{
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}
「border-collapse:separate」になっているので、「border:1px solid #ccc;」として全周囲にボーダーを適用してしまうと、隣接セルのボーダーと重複しないので線が2重になってしまいます。
そのため、テーブル全体の上と左にボータを適用し、セルには下と右にボーダーを適用することで線が2重になることを防いでいます。
当然、「border-spacing:0px」で隣接セルとの間隔をゼロすることが必要です。

角丸の指定方法

border-radiusを指定するためにも「border-collapse:separate」が必要です。「border-collapse:collapse」にしてしまうと、セルの角丸が適用されなくなってしまいます。
すべての角に角丸を適用する場合は以下のような指定をするのがオススメです。
table
{
    border-collapse:separate;
    border-spacing:0px;

    border-radius:10px;

    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
table th, table td
{
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

table tr:first-child th:first-child,table tr:first-child td:first-child
{
    border-radius: 10px 0 0 0;
}
table tr:first-child th:last-child,table tr:first-child td:last-child
{
    border-radius: 0 10px 0 0;
}
table tr:last-child th:first-child,table tr:last-child td:first-child
{
    border-radius: 0 0 0 10px;
}
table tr:last-child th:last-child,table tr:last-child td:last-child
{
    border-radius: 0 0 10px 0;
}
テーブル全体では4隅すべての角丸を指定します。
そして各セルですが、1行目最初の列は左上、1行目最後の列は右上、最終行の最初の列は左下、最終行の最後の列は右下とそれぞれに角丸を指定します。
これによって角丸のデーブルが実現できます。

CSSでテーブルをデザインしよう!

背景色の指定や背景色にグラデーションの指定、ボーターの間隔、種類などいろいろ組み合わせて見やすいテーブルをCSSで作成できます。
上記例のスタイルを基本形にすれば、概ねうまくいくはず!?


Provided by Revolme inc.
revolme.co.jp