CSS | テーブルでwidthが効かない原因と対処法
CSSでテーブルに指定している「width」プロパティが効かない原因と対処法について紹介しています。
テーブルでwidthが効かない原因
テーブルで「width」プロパティが効かない原因は、以下のようなパターンが考えられます。
- table要素のサイズよりthやtdに指定している合計サイズが大きい、または小さい
- thにサイズを指定しているが、tdにも指定している
- パーセントで指定しているが合計サイズがオーバーしている
- thとtdのどちらにもサイズ指定している場合は大きいサイズが適用される
例えば、table要素を100％に指定している場合、thやtdに指定している合計サイズが大きい場合は、左側のサイズを優先して維持し、合計100％に調節されます。
結果、右側のセルは指定値より小さくなります。
また、table要素を100％に指定している場合で、thやtdに指定している合計サイズが小さい場合は全体で調節され合計100％になります。
結果、thやtdに指定したサイズは無視されます。
テーブルでwidthが効かない場合の改善策
table要素のサイズ指定はパーセントやwh、pxなどでいずれの指定方法でも良いですが、thまたはtdに指定するサイズは、パーセントが無難で、pxなどで指定する場合は合計値に注意して想定されるウィンドウサイズを超えないようにする必要があります。
目的のデザインによって、ひとつだけpxで指定、他は指定なし、やパーセント指定をするといった方法も考えられます。
セルの横幅を均等に揃えたい場合は、横幅33％などの指定は使わずに「table-layout」で「fixed」を指定するとレイアウト崩れも起きにくいです。
table {
width: 100%;
table-layout: fixed;
}