株式会社アットマーク

MENU

【メモ】tableのカラム幅がwidth指定しても固定されない場合

2023.08.30

【メモ】tableのカラム幅がwidth指定しても固定されない場合のイメージイラスト

あるあるですが、記載の仕方を忘れることがあるので、メモ。

特に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;

で、はみ出る文字を消す、かな。

Categories

お知らせ(1)

田舎で起業(5)

独り言(2)

田舎暮らし(1)

システム開発(9)

お仕事メモ(7)

CSS(1)

MySQL(2)

PHP(1)

JavaScript(3)

Archives