【css】td,thをdisplay:block;したけれどIE9以下ではfloatが必要

tableを構築していて、スマートフォン用の表示に対応させようとするとセルの幅が狭くなって文字が読みにくくなってしまうのをdiplay:block;にする事で対応しています。

今回はレスポンシブで作成している時に同じくdisplay:block;をした際にIE9、IE8で効いていなかったので対策を調べてみました。


IE9以下でのtd,thをdisplay:block;するには

float:left;を付けると解決されました。

floatをかける事でブロック要素として認識されるようです。

IE以外でfloatがかかってしまうと不具合が出てきてしまいそうですので

float:left\9;などとしてIE9以下にスタイルがあたるようにしました。