今天偶然在项目接触到大量单据信息的展示,突然发现被复杂表头的格式给高搞懵逼了。哈哈哈,通过简单整理,记录一下吧,希望能帮到需要的朋友!其实原理很简单: rowspan 控制行、colspan 控制列。实践确实是检验真理的唯一标准。直接上例子吧,要想有深刻的体会,除了实操,别无选择。这里使用的布局模版是 Layui ,自行前往下载。当然不使用也行,自己定义表格的边距、边框线等等,使表格直观、易于理解也是可以的!
ASN加工单
工程信息
工程单号
客户工单
条码
JC2012160685
AST20123561
物料信息
物料编号
物料名称
京东京造/呈意
呈意
工序信息
工序编号
工序名称
部件
制造部门
WF
商务订单
呈意
供应链
订单信息
客户订单
订单单价
订单总价
订单数量
JS20201211-01
¥11.3
¥136800
12000
客户信息
客户编号
客户名称
客户简称
计价方式
DG4752
XXXXXXXXXXXXXX有限公司
地主
整单计价
产品信息
产品编号
加工数量
落车数
损耗数
PBX-12970
12000
12000
0
印刷信息
印刷尺寸
开料尺寸
事业处
0.000X0.000
0.000X0.000
集团供应与成本管理中心
来看下布局效果。其实所谓的复杂就是:行间嵌套的列不同、列间又展示着不同的行,其实就那么回事而已。只有自己亲自动手,才能深有体会并掌握其中的小技巧哟!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210113161933230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzk5NTYy,size_16,color_FFFFFF,t_70)
|