【CSS】max-widthが効かない時の解決方法【table】

max-widthが効かない時の解決法

max-widthが効かない時の原因と解決方法を解説します。

原因は基本的に下記の2パターンです。

  1. tbody、tr(ならびにtable-row-group、table-row)に適用しようとしている
  2. 非置換のインライン要素に適用しようとしている

以下でそれぞれ解説します。

tbodyとtrにはmax-widthは効かない

max-widthtbodytr(ならびにそれらと似た挙動をするtable-row-grouptable-row)には適用できません。

そのため、tbodytr以外の要素にmax-widthを指定する必要があります。

例えばテーブル全体の横幅の上限を指定したければtableに、セルに指定したければthtdmax-widthを当てれば解決できます。

非置換のインライン要素にはmax-widthは効かない

max-widthは非置換のインライン要素には適用できません。

非置換要素とは、<…>…</…>で囲んだテキスト要素が他のものに置換されずにブラウザに表示されるタイプのタグを指します。(例えばspanなら<span>...</span>で囲んだテキストがそのまま表示されます)

それに対して置換要素は、例えばimgなら画像、videoなら動画、といったかたちで別の何かが表示されます。

インライン要素と言ったときにイメージするほとんどのタグは非置換要素であり、これらにはmax-widthが効きません。

これは考えてみれば自然なことです。なぜなら非置換のインライン要素にはそもそもwidthが指定できないからです。

非置換のインライン要素にmax-widthを指定したい場合、その要素をinline-blockにすれば実現できます

IE11にはmax-widthが効かないバグがある

筆者の閲覧環境で直接確認できたものではありませんが、IE11では親要素がdisplay: table-cell;になっている場合にmax-widthが効かないバグがあるようです。(参考:IE11バグ display table, table-cell 内で max-width が効かない

これを解決するには親要素にtable-layout: fixed必要があるとのことです。

この記事の執筆者

牧野健人

牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。