IEでテーブル（table）がはみ出してしまうときの対処法

おはようございます！社員Aです👩

今回は、IEでテーブル（table）がはみ出してしまうときの対処法をご紹介したいと思います。

またまたハマったIEバグ テーブルがはみ出してしまう

制作時会社概要やお問い合わせフォームなどtableを使う機会があると思いますが、IEで幅が画面からはみ出してしまうバグに遭遇してしまいました。

モダンブラウザでは問題なく表示されているのですが、IE11で確認すると大幅にはみ出てしまっています。

CSSでtable要素にwidth:100%を指定してもこのバグが発生してしまいました。

それも毎回というわけではなく、規則性がない状態ではみ出しているので原因がつかめなかったのですが、ググったところあるCSSを追記するだけで簡単に解決できたので備忘録も含めて書いていきたいと思います。

はみ出してしまうtable要素にCSSを1行追加するだけで、解決！

まず、修正前の状態のCSSです。width:100%の記述をしてもはみ出してしまいます。

table{
  width:100%;
}

これに、「table-layout: fixed;」を追記すると、IEでも問題なく表示されます！

table{
  width:100%;
  table-layout: fixed;
}

「table-layout: fixed」について

ここでtable-layout:fixed についてちょっと深く探っていきたいと思います。

table-layoutは、テーブル（表）の表示方法を指定する際に使用します。

指定できるのは、テーブル（表）の列幅を自動レイアウトにするか（auto）、固定レイアウトにするか（fixed）についてです。いずれの場合も行の高さは自動的に算出されます。

table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列（セル）の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。

まとめ

たった1行追加するだけで、IEでtableが画面からはみ出してしまう現象を解決できました。

IEでtableが崩れてしまうよ！という方は是非試してみてください。