ホーム > マークアップ > CSS > tableのこと【CSS編】
tableのこと【CSS編】
- 公開日
- 2007年03月22日
テーブルタグの初期設定
table{
border-collapse:collapse;
font-size:100%;
}
border-collapse:collapse;
font-size:100%;
}
- セルとセルの間を空けるかどうかを設定するborder-collapseだが、ほとんどのブラウザでの初期設定値はぴったりくっつける「collapse」だが、まれに間を空ける「separate」であることがあるのを回避するため、「border-collapse:collapse;」を記述する。
- 色指定やフォントサイズなど通常子要素に引き継ぐ値が、ブラウザによってtableタグには引き継がれない場合がある。そのため、tableタグに改めてfont-sizeなど設定する必要があります。
ボーダーラインを非表示にしたい場合
table,tr,td{
border:none;
}
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;
}
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-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;」のみでセンタリングされる。
- この記事に関するご意見・ご感想をお待ちしております。
- コメントNo.1
tableに関するCSS情報をがっつり見直しました〜
- コメントNo.2
table{
table-layout:fixed;
}
が知りたかったんです!
助かりました。
５時間は悩んでしまいました!
コメントの削除はお手数ですが、contact@allinthemind.bizまでご連絡ください。