ここから本文です

phpで生成される表をHTML5のモバイル対応な表にしたいです。

rak********さん

2017/4/216:24:38

phpで生成される表をHTML5のモバイル対応な表にしたいです。

以下のフリーのphpプログラムを利用していますが、XHTML 1.0でつくられているためモバイル対応しておらずいまいちな感じなのでどのように修正すべきか教えてください。

/* ▼▼▼送信確認画面のレイアウト※編集可 オリジナルのデザインも適用可能▼▼▼ */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>確認画面</title>
<style type="text/css">
/* 自由に編集下さい */
#formWrap {
width:700px;
margin:0 auto;
color:#555;
line-height:120%;
font-size:90%;
}
table.formTable{
width:100%;
margin:0 auto;
border-collapse:collapse;
}
table.formTable td,table.formTable th{
border:1px solid #ccc;
padding:10px;
}
table.formTable th{
width:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}
p.error_messe{
margin:5px 0;
color:red;
}
</style>
</head>
<body>

<!-- ▲ Headerやその他コンテンツなど ※自由に編集可 ▲-->

<!-- ▼************ 送信内容表示部************ ▼-->
<div id="formWrap">
<?php if($empty_flag == 1){ ?>
<div align="center">
<h4>入力にエラーがあります。下記をご確認の上「戻る」ボタンにて修正をお願い致します。</h4>
<?php echo $errm; ?><br /><br /><input type="button" value=" 前画面に戻る " onClick="history.back()">
</div>
<?php }else{ ?>
<h3>確認画面</h3>
<p align="center">以下の内容で間違いがなければ、「送信する」ボタンを押してください。</p>
<form action="<?php echo h($_SERVER['SCRIPT_NAME']); ?>" method="POST">
<table class="formTable">
<?php echo confirmOutput($_POST);//入力内容を表示?>
</table>
<p align="center"><input type="hidden" name="mail_set" value="confirm_submit">
<input type="hidden" name="httpReferer" value="<?php echo h($_SERVER['HTTP_REFERER']);?>">
<input type="submit" value=" 送信する ">
<input type="button" value="前画面に戻る" onClick="history.back()"></p>
</form>
<?php } ?>
</div><!-- /formWrap -->
<!-- ▲ *********** 送信内容確認部************ ▲-->

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
92
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

har********さん

2017/4/313:11:46

モバイルといのが、ガラケーではなくスマホという事で話をすると
XHTMLがモバイルに対応してないという事はないです。

↓この一行をメタタグにいれるとどうでしょうか?
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport">


↓それでもだめなら、これもスタイルに追加してみてください。
@media screen and (max-width: 680px){

table.formTable,
table.formTable tr,
table.formTable th,
table.formTable td,
table.formTable tbody,
table.formTable thead{
display:block;
width:auto;
}

}

質問した人からのコメント

2017/4/4 00:17:16

大変助かりました、ありがとうございます。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる