【メモ】tableのカラム幅がwidth指定しても固定されない場合
2023.08.30
あるあるですが、記載の仕方を忘れることがあるので、メモ。
特にPHPなどで動的にtableを作成する場合によくありますよね。thやtdの幅をwidthで指定しているのに、上手く幅指定が出来ていないこと。そういった場合の対処法です。
table-layout: fixed;
カレンダーを動的に作る時などに、幅を固定する際、
th.week, td.week {
width: calc( 100% / 7 );
}
よくある方法ですが、tdの中に動的に文字(文字数がどれくらいになるかわからない時)を入れたりすると、結構レイアウトが崩れます。その時は、最後の手段「table-layout: fixed;」で解決できることがあります。
どうしても固定されないなら、動的に文字の入るブロック要素に
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
で、はみ出る文字を消す、かな。