max-widthが効かない時の原因と解決方法を解説します。
原因は基本的に下記の2パターンです。
- tbody、tr（ならびにtable-row-group、table-row）に適用しようとしている
- 非置換のインライン要素に適用しようとしている
以下でそれぞれ解説します。
tbodyとtrにはmax-widthは効かない
max-widthはtbodyとtr（ならびにそれらと似た挙動をするtable-row-groupとtable-row）には適用できません。
そのため、tbodyやtr以外の要素にmax-widthを指定する必要があります。
例えばテーブル全体の横幅の上限を指定したければtableに、セルに指定したければthやtdにmax-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必要があるとのことです。
