むだいありー

IEでのtable要素内の文字列折り返しについて

いつも躓くIE対応

IE以外のブラウザでは自動でいい感じに文字列も折り返すし、td要素の幅も中身に応じて調整してくれていた。 しかしIEは違う。 「特に指定無いんで、イッちゃいまーすwwwww」 みたいな顔して、しっかり文字列は突き抜けるしtd要素の幅もおかしくなっていた。

IE対応する時にいっつも調べたりしているので、覚えている内にメモしておこうと思う。

WEBサイト制作とかでは使わないのかもしれないけど、業務WEBアプリとかでtable使うときはIEに気をつけよ。 (そもそもDOMが汚ねぇってのは......)

とりあえず対応

table内の内容で可変のカラムが1つの場合は、それ以外のカラムの幅を決めちゃお!

table {
    table-layout: fixed;
}
td.column_1, th.column_1 {
    width: 100px;
}
td.column_2, th.column_2 {
    /* 幅指定無し */
}
td.column_3, th.column_3 {
    width: 150px;
}

table要素はtable-layout: fixed;に指定して、カラムの幅指定はthとtd要素のどちらにも指定する。 これでIEでもカラム幅を保てる。 文字列の折り返しついては、文字列を囲っている要素にword-break: break-all;なり何なりを適用する。

flexboxバグ

これで普通はは折り返せるんだけど、文字列を囲っている要素がflexboxの場合でflex-direction: column;だったりすると折り返せない。検索すると出てくるけど、バグらしい。 block要素を使ってうまーく回避しよう!

IEやめよ?

IEやめよ......?