table调整td宽度整理-完美解决--费元星前端

简介: 个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat"   审批日期 1.限制td宽度 2.

个人整理例子,留下做个备份

最终重要的几句话

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="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="加工企业代码"
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>

未来星开发团队--狒狒 QQ:9715234
相关文章
|
前端开发
若依框架---如何使用多数据源?前端table中如何显示图片?
若依框架---如何使用多数据源?前端table中如何显示图片?
709 2
|
前端开发 数据格式
jeecgboot前端antd Table组件动态合并单元格
jeecgboot前端antd Table组件动态合并单元格
925 0
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-了解table的基本使用1
前端学习笔记202305学习笔记第二十天-vue3.0-了解table的基本使用1
84 0
|
前端开发
前端笔记,table标签中td宽度不受控制的坑
前端笔记,table标签中td宽度不受控制的坑
|
JSON 前端开发 数据格式
前端提升生产力系列二(vue3 element-plus 配置json快速生成table列表组件)
在PC端日常的使用中,使用最多的过于表单和列表了,故此对table列表和form表单进行了统一的封装,通过json配置就可以快速适配table列表和form表单。
778 0
前端提升生产力系列二(vue3 element-plus 配置json快速生成table列表组件)
|
前端开发
前端项目实战伍-ant design table行实现逐行变色的效果
前端项目实战伍-ant design table行实现逐行变色的效果
251 0
|
前端开发
前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)
前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)
212 0
|
前端开发
前端项目实战贰-兼容条形打印机移动端单位用毫米设定(table版)
前端项目实战贰-兼容条形打印机移动端单位用毫米设定(table版)
135 0
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-了解table的基本使用2
前端学习笔记202305学习笔记第二十天-vue3.0-了解table的基本使用2
104 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    【开发规范系列】(四)前端开发规范(一)