問題:
可能原因:
表格寬度設為百分比,導致螢幕縮放時過度換行,影響使用者瀏覽。
原始程式:
位置:view-source:https://cus93.trade.gov.tw/FSCP000F/FSCP000F/:154
<tr>
<td width="18%" class="table_frame_1">正本資料期間:</td>
<td width="82%" bgcolor="#FFFFFF" class="table_td">
<div align="left"><font color="red">1989年01月</font>至<font color="red"> <span id="txtYEAR_MM0">2018年03月</span></font></div>
<div align="left">(最近一次轉檔日期<span id="txtTrunTime1">2018/5/17 下午 02:40:45</span>)</div>
</td>
</tr>
建議修改:
將td
寬度設置改為25%
及75%
。
<tr>
<td width="25%" class="table_frame_1">正本資料期間:</td>
<td width="75%" bgcolor="#FFFFFF" class="table_td">
<div align="left"><font color="red">1989年01月</font>至<font color="red"> <span id="txtYEAR_MM0">2018年03月</span></font></div>
<div align="left">(最近一次轉檔日期<span id="txtTrunTime1">2018/5/17 下午 02:40:45</span>)</div>
</td>
</tr>
補充:
(修正後之截圖)
其他網址的解法以此(調整td
寬度比例)類推。
問題:
可能原因:
兩個查詢法為一行,顯示較擁擠,影響使用者瀏覽。
原始程式:
位置:view-source:https://cus93.trade.gov.tw/FSCP080I/FSCP080I/:157
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tbody><tr>
<td colspan="4" class="main_bg">
<table width="100%" height="35" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="4%"><b>
<img src="/images/main_icon_s.png" width="47" height="28"></b></td>
<td width="96%">國家代碼查詢 - FSCP080I</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="14%" class="table_td">洲別:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form1" id="form1" method="post"><select id="ddlCONTINENTAL" name="ddlCONTINENTAL"><option value="All">全部州別</option>
<option value="0">亞洲</option>
<option value="2">歐洲</option>
<option value="3">非洲</option>
<option value="4">北美洲</option>
<option value="5">中美洲</option>
<option value="6">南美洲</option>
<option value="7">大洋洲</option>
<option value="8">其他</option>
</select>
<input type="submit" name="FSC3080I_Form1" id="btnQuery1" value="查詢">
</form>
</td>
<td width="19%" class="table_td">特定地區:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form2" id="form2" method="post"><select id="ddlAREA" name="ddlAREA"><option value="All">全部特定地區</option>
<option value="018">新南向政策18國</option>
<option value="13">中東13國</option>
<option value="14">中東14國</option>
<option value="33">非洲三邦交國</option>
<option value="34">非州四邦交國</option>
<option value="35">非州五邦交國(20080114前)</option>
<option value="37">非州七國</option>
<option value="38">東南非洲共同市場</option>
<option value="AAAA">全球</option>
<option value="B0">東南亞國協(10)</option>
<option value="B10">巴爾幹半島10國</option>
<option value="B6">東南亞國協(6)</option>
<option value="B7">舊東南亞國協(7)</option>
<option value="B9">東南亞國協(9)</option>
<option value="BAL3">波羅的海3國</option>
<option value="C ">東北亞</option>
<option value="CA5">中亞5國</option>
<option value="CS3">高加索3國</option>
<option value="D ">中南美洲</option>
<option value="D1">中南美洲七非邦交國</option>
<option value="D2">中南美州十二邦交國</option>
<option value="D3">中南美州十三國(200209前) </option>
<option value="D4">中南美州十二邦交國(200706前)</option>
<option value="D5">中美洲簽訂FTA國家</option>
<option value="D6">南方共同市場</option>
<option value="E ">中美洲五國(共同市場)</option>
<option value="EEU">歐亞經濟同盟</option>
<option value="F ">歐洲自由貿易聯盟</option>
<option value="G6">GCC6國</option>
<option value="H ">中東歐(16國)</option>
<option value="H1">東歐</option>
<option value="J ">大陸港澳</option>
<option value="K ">大陸及香港</option>
<option value="L ">低度開發國家(49)</option>
<option value="LAC">拉丁美洲暨加勒比海地區</option>
<option value="N ">亞太地區</option>
<option value="N6">南太平洋6邦交國</option>
<option value="P ">亞太經合會(21)</option>
<option value="P8">舊亞太經合會(18)</option>
<option value="PA1">太平洋聯盟</option>
<option value="Q ">東南亞</option>
<option value="R">區域全面經濟夥伴協定</option>
<option value="S ">獨立國協(11國)</option>
<option value="S1">獨立國協(12國)(2009前)</option>
<option value="SADC">南部非洲發展共同體</option>
<option value="T ">北美自由貿易區(NAFTA)</option>
<option value="T1">跨太平洋夥伴協定</option>
<option value="T2">跨太平洋夥伴協定11國</option>
<option value="U ">歐盟(東擴前15國)</option>
<option value="U0">歐盟(東擴10國)</option>
<option value="U17">歐元區17國</option>
<option value="U19">歐元區19國</option>
<option value="U28">歐盟區28國</option>
<option value="U35">歐洲34國</option>
<option value="U37">歐洲區37國</option>
<option value="U38">歐洲區38國</option>
<option value="U5">歐盟(東擴後25國)</option>
<option value="U6">歐盟(東擴後27國)</option>
<option value="V4">中歐V4國家</option>
<option value="X ">泰印馬菲越港</option>
<option value="Z">南亞七國</option>
<option value="Z6">南亞六國</option>
</select>
<input type="submit" name="FSC3080I_Form2" id="btnQuery2" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="14%" class="table_td">
<p>國家總列表:</p>
</td>
<td width="32%" class="table_td">
<form action="/FSCP080I/FSC3080I_Form3" id="form3" method="post">
<input type="submit" name="FSC3080I_Form3" id="btnQuery3" value="查詢">
</form>
</td>
<td width="19%" class="table_td">單一國家(地區)代碼:</td>
<td width="35%" class="table_td">
<form action="/FSCP080I/FSC3080I_Form4" id="form4" method="post">
<input name="txtCNTRY" id="txtCNTRY" type="text" style="width: 44px;" maxlength="4">
<input type="submit" name="FSC3080I_Form4" id="btnQuery4" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="14%" class="table_td">中文名稱:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form5" id="form5" method="post">
<input name="txtCName" type="text" maxlength="40" id="txtCName" alternatetext="查詢" style="text-transform: uppercase">
<input type="submit" name="FSC3080I_Form5" id="btnQuery5" value="查詢">
</form>
</td>
<td width="19%" class="table_td">英文名稱: </td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form6" id="form6" method="post">
<input name="txtEName" type="text" maxlength="40" id="txtEName" style="text-transform: uppercase">
<input type="submit" name="FSC3080I_Form6" id="btnQuery6" value="查詢">
</form>
</td>
</tr>
</tbody></table>
建議修改:
- 將查詢欄位垂直排列顯示,將每個查詢法獨立為一個
<tr></tr>
。
- 將"洲別"欄位的
td
寬度設置改為30%
。
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tbody><tr>
<td colspan="4" class="main_bg">
<table width="100%" height="35" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="4%"><b>
<img src="/images/main_icon_s.png" width="47" height="28"></b></td>
<td width="96%">國家代碼查詢 - FSCP080I</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="30%" class="table_td">洲別:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form1" id="form1" method="post"><select id="ddlCONTINENTAL" name="ddlCONTINENTAL"><option value="All">全部州別</option>
<option value="0">亞洲</option>
<option value="2">歐洲</option>
<option value="3">非洲</option>
<option value="4">北美洲</option>
<option value="5">中美洲</option>
<option value="6">南美洲</option>
<option value="7">大洋洲</option>
<option value="8">其他</option>
</select>
<input type="submit" name="FSC3080I_Form1" id="btnQuery1" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="19%" class="table_td">特定地區:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form2" id="form2" method="post"><select id="ddlAREA" name="ddlAREA"><option value="All">全部特定地區</option>
<option value="018">新南向政策18國</option>
<option value="13">中東13國</option>
<option value="14">中東14國</option>
<option value="33">非洲三邦交國</option>
<option value="34">非州四邦交國</option>
<option value="35">非州五邦交國(20080114前)</option>
<option value="37">非州七國</option>
<option value="38">東南非洲共同市場</option>
<option value="AAAA">全球</option>
<option value="B0">東南亞國協(10)</option>
<option value="B10">巴爾幹半島10國</option>
<option value="B6">東南亞國協(6)</option>
<option value="B7">舊東南亞國協(7)</option>
<option value="B9">東南亞國協(9)</option>
<option value="BAL3">波羅的海3國</option>
<option value="C ">東北亞</option>
<option value="CA5">中亞5國</option>
<option value="CS3">高加索3國</option>
<option value="D ">中南美洲</option>
<option value="D1">中南美洲七非邦交國</option>
<option value="D2">中南美州十二邦交國</option>
<option value="D3">中南美州十三國(200209前) </option>
<option value="D4">中南美州十二邦交國(200706前)</option>
<option value="D5">中美洲簽訂FTA國家</option>
<option value="D6">南方共同市場</option>
<option value="E ">中美洲五國(共同市場)</option>
<option value="EEU">歐亞經濟同盟</option>
<option value="F ">歐洲自由貿易聯盟</option>
<option value="G6">GCC6國</option>
<option value="H ">中東歐(16國)</option>
<option value="H1">東歐</option>
<option value="J ">大陸港澳</option>
<option value="K ">大陸及香港</option>
<option value="L ">低度開發國家(49)</option>
<option value="LAC">拉丁美洲暨加勒比海地區</option>
<option value="N ">亞太地區</option>
<option value="N6">南太平洋6邦交國</option>
<option value="P ">亞太經合會(21)</option>
<option value="P8">舊亞太經合會(18)</option>
<option value="PA1">太平洋聯盟</option>
<option value="Q ">東南亞</option>
<option value="R">區域全面經濟夥伴協定</option>
<option value="S ">獨立國協(11國)</option>
<option value="S1">獨立國協(12國)(2009前)</option>
<option value="SADC">南部非洲發展共同體</option>
<option value="T ">北美自由貿易區(NAFTA)</option>
<option value="T1">跨太平洋夥伴協定</option>
<option value="T2">跨太平洋夥伴協定11國</option>
<option value="U ">歐盟(東擴前15國)</option>
<option value="U0">歐盟(東擴10國)</option>
<option value="U17">歐元區17國</option>
<option value="U19">歐元區19國</option>
<option value="U28">歐盟區28國</option>
<option value="U35">歐洲34國</option>
<option value="U37">歐洲區37國</option>
<option value="U38">歐洲區38國</option>
<option value="U5">歐盟(東擴後25國)</option>
<option value="U6">歐盟(東擴後27國)</option>
<option value="V4">中歐V4國家</option>
<option value="X ">泰印馬菲越港</option>
<option value="Z">南亞七國</option>
<option value="Z6">南亞六國</option>
</select>
<input type="submit" name="FSC3080I_Form2" id="btnQuery2" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="14%" class="table_td">
<p>國家總列表:</p>
</td>
<td width="32%" class="table_td">
<form action="/FSCP080I/FSC3080I_Form3" id="form3" method="post">
<input type="submit" name="FSC3080I_Form3" id="btnQuery3" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="19%" class="table_td">單一國家(地區)代碼:</td>
<td width="35%" class="table_td">
<form action="/FSCP080I/FSC3080I_Form4" id="form4" method="post">
<input name="txtCNTRY" id="txtCNTRY" type="text" style="width: 44px;" maxlength="4">
<input type="submit" name="FSC3080I_Form4" id="btnQuery4" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="14%" class="table_td">中文名稱:</td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form5" id="form5" method="post">
<input name="txtCName" type="text" maxlength="40" id="txtCName" alternatetext="查詢" style="text-transform: uppercase">
<input type="submit" name="FSC3080I_Form5" id="btnQuery5" value="查詢">
</form>
</td>
</tr>
<tr>
<td width="19%" class="table_td">英文名稱: </td>
<td class="table_td">
<form action="/FSCP080I/FSC3080I_Form6" id="form6" method="post">
<input name="txtEName" type="text" maxlength="40" id="txtEName" style="text-transform: uppercase">
<input type="submit" name="FSC3080I_Form6" id="btnQuery6" value="查詢">
</form>
</td>
</tr>
</tbody></table>
補充:
(修正後之截圖)