博主作为一名后端开发中前端技术还说得过去的程序猿，在今天工作中突然遇到这么一个关于前端框架
Layui的比较奇怪的问题：当我在通过Layui的数据表格功能，构建一个具有复杂表头的数据表格的时候，表格内容的最前面莫名其妙的多出来一列，使原本应该整齐的表格发生了显示异常。（如图）
好在问题在经过一番搜索和查阅 API 后得到了解决。特此把源码及解决过程整理出来，以加深印象。好了，话不多说，开整。
BUG 复现
文件目录结构如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayUI 复杂表头问题</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<div style="width: 900px; margin: auto;">
<table class="layui-hide" id="test"></table>
</div>
<script src="layui/layui.all.js"></script>
<script>
var data = [{
"username": "张小三"
, "amount": 18
, "province": "浙江"
, "city": "杭州"
, "zone": "西湖区"
, "street": "西溪街道"
, "address": "西溪花园"
, "house": "30栋1单元"
}, {
"username": "李小四"
, "amount": 39
, "province": "江苏"
, "city": "苏州"
, "zone": "姑苏区"
, "street": "丝绸路"
, "address": "天墅之城"
, "house": "9幢2单元"
}, {
"username": "王小五"
, "amount": 8
, "province": "江西"
, "city": "南昌"
, "zone": "青山湖区"
, "street": "艾溪湖办事处"
, "address": "中兴和园"
, "house": "1幢3单元"
}, {
"username": "赵小六"
, "amount": 16
, "province": "福建"
, "city": "泉州"
, "zone": "丰泽区"
, "street": "南洋街道"
, "address": "南洋村"
, "house": "6幢1单元"
}, {
"username": "孙小七"
, "amount": 12
, "province": "湖北"
, "city": "武汉"
, "zone": "武昌区"
, "street": "武昌大道"
, "address": "两湖花园"
, "house": "16幢2单元"
}, {
"username": "周小八"
, "amount": 11
, "province": "安徽"
, "city": "黄山"
, "zone": "黄山区"
, "street": "汤口镇"
, "address": "温泉村"
, "house": "21号"
}];
layui.table.render({
elem: '#test'
, data: data
, cols: [[
// {title: '姓名', colspan: 1, colGroup: true}
{
title: '姓名', colspan: 1}
, {
title: '概览', colspan: 3}
, {
title: '详细', colspan: 4}], [
{
field: 'username', width:80,title: '联系人'}
, {
field: 'amount', width:80, title: '金额'}
, {
field: 'province', width:80, title: '省份'}
, {
field: 'city', width:80, title: '城市'}
, {
field: 'zone', width:80, title: '区县'}
, {
field: 'street', width:150, title: '街道'}
, {
field: 'address', width:150, title: '小区'}
, {
field: 'house', title: '门牌'}
]]
});
</script>
</body>
</html>
这个时候，上述的代码在浏览器中打开的样子就是文章开头时的图片。那么问题该如何解决呢？
解决思路
其实上述问题的解决方案非常简单，即：
在 JavaScript 中的 colspan: 1 的属性后添加 colGroup: true 属性即可。
在本案例中，则直接将注释掉的那行代码放开，将 {title: '姓名', colspan: 1} 注释掉即可。
效果如上图所示。
-------------------- 你说你很累，可谁又活的顺风顺水。 --------------------