25 November

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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.php

tableでお問い合わせフォームを作成し、スマホで「確認画面」を見たところ、
お問い合わせ内容のテキスト文章が一列でだーーーーーーーーーーーっと右に行って
横スクロールバーがでてしまった。
チェックボックスで選択された項目が多いと、それも右にだらっといって、
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";