天天看點

table調整td寬度整理-完美解決--費元星前端

個人整理例子,留下做個備份

最終重要的幾句話

0.日期格式

format="ognl:dateFormat"  

<td align="center">

<span jwcid="@Insert" value="ognl:item.spDate" format="ognl:dateFormat">審批日期</span>

</td>

1.限制td寬度

<colgroup>

<col width="27%"/>

<col width="22%" />

<col width="20%" />

<col />

</colgroup>

2.允許内容換行

<td style="word-break:break-all" align="center"><span jwcid="@Insert"

value="ognl:item.corpName">加工企業名稱</span></td>

3.沒用上,在這個項目裡,但是他可以限制在不動td的寬度下,限制内容的寬度

<div style="width:100px;word-wrap:break-word;" >

例子:

<body jwcid="$content$">

<span jwcid="@components/PopBorder" subtitle="口岸代碼清單"

disableCaching="true"> <!--目前位置-->

<!--頁面主體-->

<div id="content" class="project_tmd clearfix mt10p">

<form jwcid="listData@Form" async="ognl:async" updateComponents="ognl:updateComponents">

<!--功能區-->

<div class="fun_div">

<!--位置-->

<div class="crrent_div">您現在所在的位置:聯網監管加工企業清單</div>

<!--查詢-->

<div class="search_div p10p">

<fieldset>

<div class="item">

<label for="qf_corpName">加工企業名稱:</label><input type="text"

jwcid='corpName@TextField' displayName="加工企業名稱"

class="w150p mr10p"

value='ognl:queryFilter.fields["qf_corpName"].value' /> &nbsp;

<label for="qf_corpCode">加工企業代碼:</label><input type="text"

jwcid='qf_corpCode@TextField' displayName="加工企業代碼"

value='ognl:queryFilter.fields["qf_corpCode"].value' /> &nbsp;

<div class="pb_btn pb_aSearch">

<a href="#" jwcid="@LinkSubmit">查詢</a>

</div>

</div>

</fieldset>

</div>

</div>

<!--清單-->

<div class="content_div list_date">

<!--資料清單 以下隻是一個清單執行個體-->

<div class="pb_tableData">

<div class="pb_tableData_bd">

<table class="pb_table" border="0" cellpadding="0" cellspacing="0" width="100%">

<colgroup>

<col width="27%"/><!-- 海關代碼 -->

<col width="22%" /><!-- 海關名稱 -->

<thead>

<tr>

<th><a jwcid="sort_corpName">加工企業名稱</a></th>

<th><a jwcid="sort_corpCode">加工企業代碼</a></th>

<th>負責人</th>

<th>負責人電話</th>

<th>操作</th>

</tr>

</thead>

<tfoot>

<td colspan="2"><span jwcid="nav">翻頁元件</span> </td>

</tfoot>

<tbody>

<tr class="even" jwcid="foreach">

<td style="word-break:break-all" align="center"><span jwcid="@Insert"

value="ognl:item.corpCode">加工企業代碼</span></td>

value="ognl:item.jgqyCharge">負責人</span></td>

value="ognl:item.chargeTel">負責人電話</span></td>

<!-- <span jwcid="@Hidden"

value="ognl:item.productCapcity">負責人電話</span> -->

<td style="word-break:break-all" align="center">

<div class="pb_btn">

<a jwcid="@Any" href="#" chargeTel="ognl:item.chargeTel"

corpName="ognl:item.corpName" corpCode="ognl:item.corpCode"

jgqyCharge="ognl:item.jgqyCharge" jgqyAdress="ognl:item.jgqyAdress" productCapcity="ognl:item.productCapcity" onclick="selectItem(this)">選擇</a>

</div>

</tbody>

</table>

</div>

<div class="pb_tableData_ft">&nbsp;</div>

<!--資料清單 end-->

</form>

</div>

<script type="text/javascript">

var id = '<span jwcid="@Insert" value="ognl:corpName"/>';

var id2 = '<span jwcid="@Insert" value="ognl:corpCode"/>';

var id3 = '<span jwcid="@Insert" value="ognl:jgqyAdress"/>';

var id4 = '<span jwcid="@Insert" value="ognl:jgqyCharge"/>';

var id5 = '<span jwcid="@Insert" value="ognl:chargeTel"/>';

var id6 = '<span jwcid="@Insert" value="ognl:productCapcity"/>';

function selectItem(obj){

window.opener.document.getElementById(id).value=$(obj).attr('corpName');

window.opener.document.getElementById(id2).value=$(obj).attr('corpCode');

window.opener.document.getElementById(id3).value=$(obj).attr('jgqyAdress');

window.opener.document.getElementById(id4).value=$(obj).attr('jgqyCharge');

window.opener.document.getElementById(id5).value=$(obj).attr('chargeTel');

window.opener.document.getElementById(id6).value=$(obj).attr('productCapcity');

window.close();

}

</script>

</span>

</body>

未來星開發團隊--狒狒

QQ:9715234

繼續閱讀