Html+Css复杂表格的制作

今天偶然在项目接触到大量单据信息的展示，突然发现被复杂表头的格式给高搞懵逼了。哈哈哈，通过简单整理，记录一下吧，希望能帮到需要的朋友！其实原理很简单： rowspan 控制行、colspan 控制列。实践确实是检验真理的唯一标准。直接上例子吧，要想有深刻的体会，除了实操，别无选择。这里使用的布局模版是 Layui ,自行前往下载。当然不使用也行，自己定义表格的边距、边框线等等，使表格直观、易于理解也是可以的！

<div class="layui-card">
    <div class="layui-card-header txt_center">ASN加工单</div>
    <div class="layui-card-body">
        <table class="layui-table" style="text-align:center">
            <tr>
                <td rowspan=2>工程信息</td>
                <td>工程单号</td>
                <td>客户工单</td>
                <td colspan=2>条码</td>
            </tr>
            <tr>
                <td>JC2012160685</td>
                <td>AST20123561</td>
                <td rowspan=3 colspan=2 style="height:45px;text-align:center">
                    <img src="/BarCode/GetBarCode?fileName=JC2012160686-H-1" style="transform: scale(2);" />
                </td>
            </tr>
            <tr>
                <td rowspan=2>物料信息</td>
                <td>物料编号</td>
                <td>物料名称</td>
            </tr>
            <tr>
                <td>京东京造/呈意</td>
                <td>呈意</td>
            </tr>
            <tr>
                <td rowspan=2>工序信息</td>
                <td>工序编号</td>
                <td>工序名称</td>
                <td>部件</td>
                <td>制造部门</td>
            </tr>
            <tr>
                <td>WF</td>
                <td>商务订单</td>
                <td>呈意</td>
                <td>供应链</td>
            </tr>
            <tr>
                <td rowspan=2>订单信息</td>
                <td>客户订单</td>
                <td>订单单价</td>
                <td>订单总价</td>
                <td>订单数量</td>
            </tr>
            <tr>
                <td>JS20201211-01</td>
                <td>￥11.3</td>
                <td>￥136800</td>
                <td>12000</td>
            </tr>
            <tr>
                <td rowspan=2>客户信息</td>
                <td>客户编号</td>
                <td>客户名称</td>
                <td>客户简称</td>
                <td>计价方式</td>
            </tr>
            <tr>
                <td>DG4752</td>
                <td>XXXXXXXXXXXXXX有限公司</td>
                <td>地主</td>
                <td>整单计价</td>
            </tr>
            <tr>
                <td rowspan=2>产品信息</td>
                <td>产品编号</td>
                <td>加工数量</td>
                <td>落车数</td>
                <td>损耗数</td>
            </tr>
            <tr>
                <td>PBX-12970</td>
                <td>12000</td>
                <td>12000</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan=2>印刷信息</td>
                <td>印刷尺寸</td>
                <td>开料尺寸</td>
                <td colspan=2>事业处</td>
            </tr>
            <tr>
                <td>0.000X0.000</td>
                <td>0.000X0.000</td>
                <td colspan=2>集团供应与成本管理中心</td>
            </tr>
        </table>
    </div>
</div>

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