列合并和列宽度固定:
1 .setWidth { 2 table-layout: fixed; 3 } 4 5 .setWidth > thead > tr > th { 6 width: 80px; 7 } 8 <table class="setWidth" id="EstateTable" data-mobile-responsive="true"> 9 <colgroup> 10 <col style="width:36px;" /> 11 <col style="width:17%" /> 12 <col style="width:48px;" /> 13 <col style="width:60px;" /> 14 <col style="width:12%;" /> 15 @*<col style="width:7%;" /> 16 <col style="width:7%;" />*@ 17 <col style="width:6%;" /> 18 <col style="width:144px;" /> 19 <col style="width:48px;" /> 20 <col style="width:48px;" /> 21 <col style="width:6%;" /> 22 <col style="" /> 23 </colgroup> 24 <thead> 25 26 <tr> 27 <th data-field="state" style="width:36px;" data-checkbox="true"></th> 28 <th data-field="EstateType" data-visible="false">盘源类型ID</th> 29 <th data-field="ID" data-visible="false">ID</th> 30 <th data-field="EstateName" data-formatter="nameFormatter">楼盘名称</th> 31 <th data-field="EstateTypeDisplay">类型</th> 32 <th data-field="Address" style="width:60px;" align="center">城区</th> 33 <th data-field="Developer">发展商</th> 34 35 @*<th data-field="EstateModeDisplay">楼宇类型</th>*@ 36 @*<th data-field="Area">占地面积</th> 37 <th data-field="ConstrctionArea">建筑面积</th>*@ 38 @*<th data-field="ProjectProxyModeDisplay">代理类型</th>*@ 39 <th data-field="RegisterName">跟进人</th> 40 <th data-field="RegisteDate">登记时间</th> 41 <th data-field="FollowLevelDisplay">评级</th> 42 <th data-field="BusinessCard" data-formatter="imgFormatter">名片</th> 43 <th data-field="AuthStatusDisplay" data-formatter="actionFormatter">状态</th> 44 <th data-field="operation" width="120px;" data-formatter="operateFormatter">操作</th> 45 46 </tr> 47 </thead> 48 </table>
行合并:
$('#EstateTable').bootstrapTable({ url: '/table/tableStyle', method:'post', pagination: true, //分页 pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: false, //显示搜索框 sidePagination: "server"
onLoadSuccess: function (data) {
$('#EstTable').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
}
});