Q&A
#以下のコードについて、添付画像のようにレイアウトを変更したいのですが、tableのどこのコードを書き換えれば反映されますか？変更はPC版のみで、スマホ版は現状のレイアウトを維持で考えています。※よろしくお願いします。
html
1 2<!-- ヘッダをインクルード --> 3<{include file='header.tpl' titletag='注文入力画面(注文者・送付先情報の入力)'}> 4 5<div id="main_area"> 6<div id="main_cont"> 7 8<div class="title">填写订购画面</div> 9<br> 10 11<!-- エラーメッセージ --> 12<{if count($errmsg) > 0}> 13<div class="errbox"> 14<{foreach from=$errmsg item=value}><{$value}><br><{/foreach}> 15</div> 16<{/if}> 17<!--// エラーメッセージ --> 18 19订购前，请倾务必确认[<a href="<{$kiyaku_url}>" target="_blank">使用规则</a>]。在订购时，我们会认为已经同意此规则。<br> 20<br> 21 22购物车里装有下列商品 23<!-- カートの中身 --> 24<table class=tbl cellspacing="1" width="100%"> 25<tr> 26<td class="cell_t">商品名</td> 27<td class="cell_t">价格</td> 28<td class="cell_t">订购數量</td> 29<td class="cell_t">小計</td> 30<{if $price_conv_flag == "1"}> 31 <td class="cell_t">换算值</td> 32<{/if}></tr> 33<!-- カート内の全商品を表示 --> 34<{section name=key loop=$cart}> 35 <!-- 1商品の定義 --> 36 <tr> 37 <td class="cell_d"><{$cart[key].name}><{if $cart[key].num != ''}>(<{$cart[key].num}>)<{/if}><{foreach from=$cart[key].opt item=value}><br><{$value}><{/foreach}></td> 38 <td class="cell_d" align="right"><{$cart[key].price}> <{$tsuka_tani}><br><span class="t10"></span><br><{$cart[key].price2}> <{$tsuka_tani}><br><span class="t10"></span></td> 39 <td class="cell_d" align="right"><{$cart[key].kosu}> <{$cart[key].tani}></td> 40 <td class="cell_d" align="right"><{$cart[key].subtotal}> <{$tsuka_tani}><br><span class="t10"></span><br><{$cart[key].subtotal2}> <{$tsuka_tani}><br><span class="t10"></span></td> 41 42<!-- 価格 換算値 --> 43<{if $price_conv_flag == "1"}> 44 <td class="cell_d" align="right"><{$cart[key].subtotal_conv}><br><span class="t10">(国内价格)</span><br> 45<{$cart[key].subtotal2_conv}><br><span class="t10">(日本国外价格)</span></td> 46<{/if}> 47<!--// 価格 換算値 --> 48 49 </tr> 50 <!--// 1商品の定義 --> 51<{/section}> 52<!--// カート内の全商品を表示 --> 53<tr align="right"><td class="cell_t" colspan="3"><b>商品合计</b></td><td class="cell_d"><b><{$goods_total}> <{$tsuka_tani}><br><span class="t10"></span><br><{$goods_total2}> <{$tsuka_tani}><br><span class="t10">(日本国外价格)</span></b></td> 54 55<td class="cell_d"><b><{$goods_total_conv}> <!--<{$tsuka_tani}>--><br><span class="t10"></span><br><{$goods_total2_conv}> <!--<{$tsuka_tani}>--><br><span class="t10">(日本国外价格)</span></b></td> 56 57</tr> 58</table> 59<!--// カートの中身 --> 60<br> 61 62<form action="<{$order_acturl}>" method="post"> 63<{$order_hidden}> 64 65<b>填写订购人资料</b><br> 66 67<span class="note">*</span>栏为必须填 68<table class="tbl" cellspacing="1" width="100%"> 69<tr> 70<td class="cell_t" width="100%">姓名<span class="note">*</span></td> 71</tr> 72<tr> 73<td class="cell_d" width="100%"> 74姓<input type="text" name="name_sei" class="frm_str" size="14" maxlength="85" value="<{$name_sei}>"> 75名<input type="text" name="name_mei" class="frm_str" size="14" maxlength="85" value="<{$name_mei}>"><span class="note2"></td> 76</tr> 77 78<{if $shop_pref_overseas_omit_flag == "1"}> 79<tr> 80<td class="cell_t">国家名<span class="note">*</span></td> 81</tr> 82 83<tr> 84<td class="cell_d"> 85<input type="hidden" name="ken_id" value="99" id="ken_id"> 86中国 87<select name="country_id" id="country_id" style="display:none"> 88<{html_options options=$so_country_options selected="cn"}> 89</select> 90</td> 91</tr> 92 93<{else}> 94 95<tr> 96<td class="cell_t">省市自治区/国家名<span class="note">*</span></td> 97<td class="cell_d"> 98<!--日本国外の方は都道府県から「日本国外」を選び、国名をお選びください。--><br> 99 100国家名<select name="country_id" class="frm_str" onchange="ken_autoset(this, this.form.ken_id)"> 101<option value="">选择</option> 102<{html_options options=$country_options selected=$country_id}> 103</select> 104 105省市自治区<select name="ken_id" class="frm_str" onchange="country_autoset(this, this.form.country_id)"> 106<option value="">选择</option> 107<{html_options options=$ken_options selected=$ken_id}> 108</select> 109 110</td> 111</tr> 112<{/if}> 113 114<tr> 115<td class="cell_t">邮编号码<span class="note"><!--*--></span><br><span class="note2"><!-- (必须填) --></span></td> 116</tr> 117 118<tr> 119<td class="cell_d"><input type="text" name="zip" class="frm_num" size="10" maxlength="20" value="<{$zip}>"><br><span class="note2">(例:518117)</span> 120</td> 121</tr> 122 123<tr> 124<td class="cell_t">住址 省市自治区/（市区街道村委）<span class="note">*</span></td> 125</tr> 126 127<tr> 128<td class="cell_d"> 129 130地区:(省市区)<select name="option_2" class="frm_str"> 131<option value="">选择</option> 132 <option value="安徽省">安徽省</option> 133 <option value="福建省">福建省</option> 134 135</select> 136</td> 137</tr> 138 139<tr> 140<td class="cell_d"> 141<input type="text" name="addr" class="frm_str" size="40" maxlength="85" value="<{$so_addr}>"> 142</td> 143</tr> 144 145<tr> 146<td class="cell_t">电话号码<span class="note">*</span></td> 147</tr> 148 149<tr> 150<td class="cell_d"><input type="text" name="tel" class="frm_num" size="20" maxlength="20" value="<{$tel}>"><br><span class="note2">(例:0755－12345678)</span></td> 151</tr> 152 153<tr> 154<td class="cell_t">邮件地址<span class="note">*</span></td> 155</tr> 156 157<tr> 158<td class="cell_d"> 159<input type="text" name="email" class="frm_num" size="28" maxlength="100" value="<{$email}>"><span class="note2">(半角英文数字)</span><br><span class="note2">(例:xxxxx@example.com) </span></td> 160</tr> 161</table> 162 163 164<br> 165<div align="center"><input type="submit" value="下一页"></div> 166 167</form> 168 169</div><!--// main cont --> 170</div><!--// main area --> 171 172<!-- フッタをインクルード --> 173<{include file='footer.tpl'}>
css
1 2/*-------------------------------------- 3 * css(プロトタイプ) 4 *------------------------------------*/ 5 6@media(max-width:779px){ 7 .lang{ 8 display: none; 9 } 10.smp_item{ 11display:none; 12} 13} 14@media(min-width:780px){ 15 .lang{ 16 display: block; 17 18 } 19.smp_item{ 20display:block; 21} 22} 23/*-------------------------------------- 24 * 全体の定義 25 * ページ背景色・背景画像 26 * 文字色・サイズ 27 *------------------------------------*/ 28body { 29 background-color:#fff; 30 color:#666666; 31 font-size:13px; 32 line-height:130%; 33 margin: 0px; 34 padding: 0px; 35 text-align:center; 36 font-family: verdana, arial, helvetica, sans-serif; 37} 38tr,td,th,div { 39 color: #666666; 40 font-size: 13px; 41 line-height: 130%; 42} 43form { 44 margin: 0px; 45 padding: 0px; 46} 47img { 48 border:0px; 49} 50hr { 51 color:#afaeae; 52 border-style:dotted; 53 height:1px; 54} 55 56.t10 { font-size: 10px;line-height: 130%; } 57.t13 { font-size: 13px;line-height: 130%; } 58.t15 { font-size: 15px;line-height: 130%; } 59.t18 { font-size: 18px;line-height: 130%; } 60/*-------------------------------------- 61 * テーブル 62 *------------------------------------*/ 63/* テーブル枠 */ 64.tbl { 65 background-color:#afaeae; 66} 67/* タイトル部 */ 68.cell_t { 69 color:#fff; 70 background-color:#00a0e9; 71 padding: 3px; 72 white-space:nowrap; 73 text-align: center; 74 font-size: 1.2em; 75} 76/* データ部 */ 77.cell_d { 78 color:#666666; 79 background-color:#ffffff; 80 padding: 3px; 81 text-align: center; 82 font-size: 1.2em; 83} 84 85/*-------------------------------------- 86 * 強調文字 87 *------------------------------------*/ 88.stress { 89 color: #cc0000; 90 font-weight: bold; 91} 92 93/*-------------------------------------- 94 * フォーム注意書き文字 95 *------------------------------------*/ 96.note { /* stress */ 97 font-size: 12px; 98 color: #ff0000; 99} 100.note2 { /* normal */ 101 font-size: 12px; 102 color: #666666; 103} 104 105/*-------------------------------------- 106 * エラーメッセージボックス 107 *------------------------------------*/ 108.errbox { 109 background: #ffffcc url(/tpl_img/proto_ja/alert.gif) 4px 4px no-repeat; 110 border: 1px solid; 111 border-color: #ff0000; 112 padding: 5px 5px 5px 32px; 113 margin:10px auto; 114 text-align: left; 115 color:#ff0000; 116 font-size:13px; 117} 118 119/*-------------------------------------- 120 * 商品リストボックス 121 *------------------------------------*/ 122/* 一覧形式 */ 123.goodslist_box { 124 background-color:#f7f7f3; 125 border: 1px solid; 126 border-color: #afaeae; 127 padding:10px; 128 margin:10px 0px 10px 0px; 129} 130/* マス目形式 */ 131.goodslist_box2 { 132 float:left; 133 padding:10px; 134} 135 136 137/*-------------------------------------- 138 * リンク抑制文字色 139 *------------------------------------*/ 140.linkoff { 141 color: #c0c0c0; 142 text-decoration: underline; 143} 144 145/*-------------------------------------- 146 * other table bug 147 *------------------------------------*/ 148/* 3px IE bug hack hidden from IE5-mac */ 149* html #header_area { height: 1%; } 150* html #main_cont { height: 1%; } 151* html #main_cont2 { height: 1%; } 152/* End hide from IE5-mac */
回答2件
0
ベストアンサー
「CSS テーブル レスポンシブ」で検索するとサンプルがいろいろ見つかるので、その中で希望に近いものを参考に作成するといいでしょう。
例えば、
投稿2021/01/18 04:11
編集2021/01/18 04:13
総合スコア34073
0
まずはPC版のテーブルを普通にHTMLでくんで、スマホ用はwidthなどを見て
cssでハックすればよいでしょう
投稿2021/01/18 03:33
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/18 07:25
2021/01/18 07:57