基于Bootstrap table组件实现多层表头配置

BootStrap Table

<table id="table" class="table"></table>

$("#table").bootstrapTable({});

columns： 配置标题

columns:[

[ { "title": "洗衣机统计表", "halign":"center", "align":"center", "colspan": 5 } ],

[ { field: 'name', title: "功能分组", valign:"middle", align:"center", colspan: 1, rowspan: 2 }, { title: "美的", valign:"middle", align:"center", colspan: 2, rowspan: 1 }, { title: "松下", valign:"middle", align:"center", colspan: 2, rowspan: 1 } ],

[ { field: 'mideaNum', title: '数量', valign:"middle", align:"center" }, { field: 'mideaPercent', title: '占比', valign:"middle", align:"center" }, { field: 'panasonicNum', title: '数量', valign:"middle", align:"center" }, { field: 'panasonicPercent', title: '占比', valign:"middle", align:"center" } ]

]

配置三层表头，注意合并（rowspan, colspan）

 

css设置标题颜色：

.table>thead>tr:nth-child(2)>th {
font-weight: normal;
font-size: 13px;
color: #337ab7;
}

.table>thead>tr:nth-child(1)>th:nth-child(2){
color: #337ab7;
}

/*第三个子元素*/
.table>thead>tr:nth-child(1)>th:nth-child(3){
border-right:1px solid #ccc;
}