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>

  • 相关阅读:
    Spark实战练习03--Pair RDD
    Spark实战练习02--处理分隔符
    Spark实战练习01--XML数据处理
    做一个”合格“的程序员(二)——学习管理
    做一个“合格”的程序员(一)——基础能力
    图像处理算法之帧间差分法
    图像几何变换之透视变换
    图像几何变换之仿射变换
    内部排序之简单选择排序
    非极大值抑制算法
  • 原文地址:https://www.cnblogs.com/feiyuanxing/p/4832798.html
Copyright © 2011-2022 走看看