0から目指すWebマスター Web制作に関する備忘録
検索

CSS

tableのこと【CSS編】

テーブルタグの初期設定

table{
border-collapse:collapse;
font-size:100%;
}

ボーダーラインを非表示にしたい場合

table,tr,td{
border:none;
}

ボーダーラインを表示させたい場合

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

このように、ボーダーラインが2重に書かれることがないよう配慮する。

tableのセル幅を均等にする

table{
table-layout:fixed;
}

tableをセンターにしたいときの注意 〜「margin:0 auto;」が効かない!?〜

「margin-left:○○px」と記述すれば問題ないが、なぜかIE6ではautoに対応していない。
これに対応させるに後方互換性に対応するときと同様の対策が必要である。
つまり、tableタグに「margin:0 auto;」指定することに加え、tableを囲むタグに「text-align:center;」を記述し、table内のタグ(th,td)に必要に応じて「text-align:left;」を記述する必要がある。

ちなみにモダンブラウザでは、tableタグにおいて「margin:0 auto;」のみでセンタリングされる。