zoukankan      html  css  js  c++  java
  • 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="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="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="加工企业代码"
    class="w150p mr10p"
    value='ognl:queryFilter.fields["qf_corpCode"].value' /> &nbsp;
    <div class="pb_btn pb_aSearch">
    <a href="#" jwcid="@LinkSubmit">查询</a>
    </div>
    &nbsp;
    </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%" /><!-- 海关名称 -->
    <col width="22%" />
    <col width="20%" />
    <col />
    </colgroup>
    <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>
    <tr>
    <td colspan="2"><span jwcid="nav">翻页组件</span> </td>
    </tr>
    </tfoot>
    <tbody>
    <tr class="even" jwcid="foreach">
    <td style="word-break:break-all" align="center"><span jwcid="@Insert"
    value="ognl:item.corpName">加工企业名称</span></td>
    <td style="word-break:break-all" align="center"><span jwcid="@Insert"
    value="ognl:item.corpCode">加工企业代码</span></td>
    <td style="word-break:break-all" align="center"><span jwcid="@Insert"
    value="ognl:item.jgqyCharge">负责人</span></td>
    <td style="word-break:break-all" align="center"><span jwcid="@Insert"
    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>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    <div class="pb_tableData_ft">&nbsp;</div>
    </div>
    <!--数据列表 end-->
    </div>
    </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>

  • 相关阅读:
    小波变换的引入,通俗易懂
    Leetcode 437. Path Sum III
    Leetcode 113. Path Sum II
    Leetcode 112 Path Sum
    Leetcode 520 Detect Capital
    Leetcode 443 String Compression
    Leetcode 38 Count and Say
    python中的生成器(generator)总结
    python的random模块及加权随机算法的python实现
    leetcode 24. Swap Nodes in Pairs(链表)
  • 原文地址:https://www.cnblogs.com/feiyuanxing/p/4832798.html
Copyright © 2011-2022 走看看