若依前后端不分离：bootstrap-table：轻松实现复杂表头

1.效果图

2.实现方法

 <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
 
$(function () {
        var options = {
            url: prefix + "/list",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            columns: [[
                {
                    title: '销售大区',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '区域',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '经销商',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '期前欠款',
                    align: 'center',
                    colspan: 4
                }, {
                    title: '2016年发车数量',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '2016年销售明细',
                    align: 'center',
                    colspan: 12
                }, {
                    title: '账上目前预付款',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '截止2016年欠款',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '2016收款',
                    align: 'center',
                    rowspan: 3
                }
            ],
                [{
                    field: 'userPhone',
                    title: '销售发车',
                    align: "center",
                    colspan: 3
                }, {
                    field: 'userEmail',
                    title: '款转为2017年预付款',
                    align: "center",
                    rowspan: 2
                }, {
                    field: 'userBalance',
                    title: '2016年合同货值',
                    align: "center",
                    colspan: 3
                }, {
                    field: 'status',
                    title: '其他费用',
                    align: "center",
                    colspan: 3
                }, {
                    title: '代付运费',
                    align: 'center',
                    colspan: 3
                }, {
                    title: '2016年货后客户逾期)',
                    align: 'center',
                    colspan: 3
                }
                ],
                [{
                    field: 'userPhone',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'status',
                    align: "center",
                    title: '应收'
                }, {
                    align: 'center',
                    title: '实收'
                }, {
                    field: 'userPhone',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'status',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userPhone',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '欠款'
                }
                ]
            ]
        };
        $.table.init(options);
    });

https://blog.csdn.net/Baby_pw/article/details/92803054