列合並和列寬度固定:
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});
}
});