contact form 7にも対応するフォーム内のHTMLテーブルの横幅がはみ出る原因

Webサイト上のテーブル作成時、「テーブルの内容が親要素をはみ出してしまう」といった問題はありませんか？筆者も同様の問題で数時間悩まされたので、CSSでの解決策をまとめます。

よくある問題：テーブルの幅が親要素をはみ出し、画面幅も超えてしまう

HTMLのテーブルは、デフォルトで コンテンツの長さに応じてセルの幅が決まる 仕様になっているようです。そのため、モバイル表示での親要素の `max-width` を超えてテーブルがはみ出す現象が起きやすいです。

これは、contact form 7のフォームのテーブルでも現象として起こります。

解決策： table-layout: fixed; を適用する

この問題は、table-layout: fixed; を使ってテーブルのレイアウトを固定 すると解決できます。

table-layout: fixed; を適用するCSS

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

これでテーブルの幅が固定され、モバイル表示でも親要素を飛び出すことがなくなります！