IEやedgeでテーブルなどの表示がおかしい時に使えるtable-layout: fixed;
最終更新日: Update!!
ChromeやFirefoxなどのモダンブラウザではきちんと表示されているのにIEやEdgeでは表示がおかしいといったケースは多々あるかと思います。そこで今回はtable-layoutプロパティを使った対応策をまとめていきたいと思います。
テーブルのレイアウト指定を行うtable-layoutプロパティ
普段あまり見かけないものですが、テーブルの列幅を自動にするか固定幅にするかを指定するプロパティです。プロパティの値にはセルのコンテンツに合わせる自動幅「auto」と固定幅の「fixed」が入ります。初期値では「auto」になります。基本的にはtable要素に使用しますが、display: table;などが指定されている要素にも使えます。 IEやedgeなどは他のモダンブラウザと挙動が異なる部分があり、このtable-layoutプロパティを入れると解決する問題がいくつかありますので見ていきましょう。thやtdのwidth指定が効かず意図している幅にならない
thとtdにwidth指定を行なっているにもかかわらず反映されていない場合は親要素であるtableに対して、table-layout: fixed;を指定するとwidthが反映されるようになります。 IEやedge用にハックを使ってもいいかもしれませんが、常にこのような記述をしておいた方が間違いないかもしれませんね。max-width: 100%;が効かず画像などがはみ出して表示されてしまう
img要素などをレスポンシブにする時などで、max-width: 100%;を設定していても親要素からはみ出して大きく表示される場合があります。これはimg要素の親要素にdisplay: table-cell;が指定されているのが原因です。 そこでdisplay: table-cell;が指定されている親要素(display: table;が指定されている要素)にtable-layout: fixed;を指定するとmax-width: 100%;が効くようになります。// HTML <div class="parent"> <div class="child"> <img src="sample.jpg"> </div> </div> // CSS .parent { display: table; table-layout: fixed; } .child { display: table-cell; } .child img { max-width: 100%; height: auto; }
sponserd
keyword search
categories
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
comments
オガワ シンヤ
COZY