16
October
tabelのcssをレスポンシブに対応させる。table内の文章がはみ出る。
tabelのcssをレスポンシブに対応させる
table th, table td{
display:block;
width:100%;
}
table thとtdにdisplay:block;を指定する
tableだと display:table がデフォルトで指定されてるため、
display:block; することで横並びを解除し、ブロック要素ごとに改行される
table内の文章がはみ出る。
table.formTable td div{word-break:break-all;
}
【MailForm01】PHP多機能メールフォーム フリー(無料)版 を使用
http://www.php-factory.net/mail/01.phptableでお問い合わせフォームを作成し、スマホで「確認画面」を見たところ、
お問い合わせ内容のテキスト文章が一列でだーーーーーーーーーーーっと右に行って
横スクロールバーがでてしまった。
チェックボックスで選択された項目が多いと、それも右にだらっといって、
width:100%; 通りに自動改行してくれない。
調べると word-break:break-all; を指定するとよいようだ。
しかし指定しても改行してくれない。table属性に直接指定しても無視される。
そのため td th 内をdivやpなどで囲う必要がある。
mail.php内のオレンジ色のところにdivをつけたして出力されるようにした。
function confirmOutput($arr){
~~~~~~~
$html .= "<tr><th>".$key."</th><td><div>".$out;
$html .= '<input type="hidden" name="'.$key.'" value="'.str_replace(array("<br />","<br>"),"",$out).'" />';
$html .= "</div></td></tr>\n";
PR