tableのCSS

tableのcssはいつもコピペですみません。

table {
    margin: 10px 5px;
    border-top:1px solid #c1c1c1;
    border-left:1px solid #c1c1c1;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
th {
    border-right:1px solid #c1c1c1;
    border-bottom:1px solid #c1c1c1;
    color:#383125;
    font-weight: normal;
    background-color:#efefef;
    /*background-position:left top;*/
    padding:0.1em 1em;
    text-align:center;
}
td {
    border-right:1px solid #c1c1c1;
    border-bottom:1px solid #c1c1c1;
    padding:0.2em 1em;
}

table-731注意すべき点はいくつかあって、border-spacing:0;っていうところです。これやっておかないとテーブルのデフォルトのデザインのなんか下手に立体的にするようなダサいデザインが適用されてしまいます。ここは注意。もう一つは、empty-cells:show;です。値がなくともセルを表示させておくようにします。むかしだったら

という感じでセルに改行を入れておくと表示されるなんていう強引な技がありましたが、理屈はそれと同じです。 ボーダーの設定は、上記図のような感じです。まどろっこしいですが、これしかやりようがない。ここ最近ではキャプションとかなんとかいろんなタグが増えていますが、ここで割愛。基本的にはこんなようなのでできるというので勘弁してください。

Last update: 2016.06.20 (月)