Html+Css复杂表格的制作

您所在的位置:网站首页 表格制作设计 Html+Css复杂表格的制作

Html+Css复杂表格的制作

2023-09-12 03:54| 来源: 网络整理| 查看: 265

今天偶然在项目接触到大量单据信息的展示,突然发现被复杂表头的格式给高搞懵逼了。哈哈哈,通过简单整理,记录一下吧,希望能帮到需要的朋友!其实原理很简单: 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 集团供应与成本管理中心

来看下布局效果。其实所谓的复杂就是:行间嵌套的列不同、列间又展示着不同的行,其实就那么回事而已。只有自己亲自动手,才能深有体会并掌握其中的小技巧哟!

在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3