th、tdにFlexboxを使うとwidth指定がきかない

公開日: / 更新日:

tableタグにFlexboxを適用したところ、Edgeではセル幅がちゃんと確保できず、内容に応じて狭くなってしまう事態が発生。
table-layout:fixedでは対応できなかったので、この事象の原因と対処法をまとめました!

事象

外部システムから発行したHTMLコードを改変せずそのまま使わなきゃいけない箇所があり、以下のHTMLコードを

  • はじめの4つの見出し&コンテンツ→横幅50%で横並び
  • 後ろ2つの見出し&コンテンツ→横幅100%で縦並び

このように並ばせようとしました。

やりたいレイアウト

適用コード

上記を各ブラウザで表示確認したところ、

  • (Mac)safari、firefox→問題なし
  • (Win)Chrome→問題なし
  • (Win)Edge/IE→崩れが発生!

どうやらEdge/IEだけth、tdで指定したwidthがちゃんと効いていない模様。
trのwidth幅は指定通り確保されていましたが、th、tdだけ内容量によって横幅が変わってしまいました。

調べてみると「tableタグでwidth幅が確保できない時はtable-layout:fixedで解決する」という事例が多くありましたが、こちらを試してみても解消せず。

原因

テストコードで各ブラウザの表示を検証してみました。

テストコード

子要素divを2つ持つ、親要素divのセットを2セット用意。
この事象がtableタグならではかどうかの切り分けをするため、後者のdivの子要素には「display: table-cell;」を指定してみました。

結果


(Mac)safari、chrome、firefox、(Win)chrome→問題なし


(Win)Edge→横幅とれず!

つまり、flex-itemがtable-cellの場合、Edge/IEではwidth指定がきかなくなるということのようです。

解決

この崩れが起きた場合は、display: table-cellになっている子要素をdisplay:blockにすることで解消することができました。

基本的に横並びにしたい!という時にフレックスボックスとテーブルレイアウトを同時に使うことはないと思います。
なので、特にtableタグをflexでこねくり回したいという時にはご注意ください。

  • このエントリーをはてなブックマークに追加