tableを細かくサイズ調整しようとした際につまりやすい点を記載します。
確認事項
tableが display:table になっているか
display:tableでないと、tr, th, tdなど、配下のレイアウト機能が動作せずに崩れることがある。
tableに table-layout:fixed が設定されているか
これがないとtrなどのwidthやheightが効かない。
border-collapse には何が設定されているか
collapseまたはseparateが設定されている。collapseは隣接セルと罫線を共有する。
box-sizing は何が設定されているか
border-boxかcontent-boxが設定されている。border-boxは罫線が内側、content-boxは外側に描画される。
おすすめ設定
tableは display:table から変更しないこと。
tableには table-layout:fixed をつけること。
tableには border-collapse:separate を設定すること。
各要素には box-sizing:border-box を設定すること。
これで直感的にサイズ計算がしやすくなるはず。
コメント