<script src="/kaoqin/js/bootstrap/js/bootstrap.min.js"></script>

<script src="/kaoqin/js/bootstrap-table/bootstrap-table.min.js"></script>

<script src="/kaoqin/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<script src="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.js"></script>

1 新增樣式，設定列寬由表格寬度和列寬度設定：

.table{

table-layout: fixed;

}

2 bootstrapTable初始化的時候 field設定寬度

{ field : "", title : "" ,align: "center", valign: "middle",width:120}

3 bootstrapTable初始化的時候 height設定高度(表頭設定有兩種方法，這裡使用的是在bootstrapTble設定height ，這種方法有缺陷，表格高度固定，這就需要寫額外的js去動態設定table的高度)

var h = $(window).height() - 100;

$("#table").bootstrapTable("destroy")

.bootstrapTable(

{

method : "get", // 伺服器資料的請求方式 get or post

url : "/attendance/record/recordList", // 伺服器資料的載入地址

height:h,

tips：動態設定高度可以使用 $(window).resize();

4 bootstrapTable初始化的時候 設定fixedColumns 和fixedNumber

fixedColumns: true,

fixedNumber: 5

5 table 標籤外的div 新增class=table-responsive

<div>

<table></table>

</div>

6 動態設定凍結列的高度（透過看fix-columns.js原始碼可以知道，凍結列是透過在table前加div，並是div置於table對應的div之上來實現的）

$(window).resize(function () {

var h = $(window).height();

var w = $(window).width();

var $fixedTableBody = $("#table").closest("div"),

$fixedTableBodyColumns = $fixedTableBody.prev(),

$FixedtableContainer = $fixedTableBody.closest("div");

$FixedtableContainer.height(h - 200);

$fixedTableBodyColumns.height(h - 253);

});

最後貼出部分程式碼（bootstarpTalbe初始）

var columns = [];

var t1 = { field : "name", title : "姓名" ,align: "center", valign: "middle",width:120};

var t2 = { field : "username", title : "賬號" ,align: "center", valign: "middle",width:120};

var t3 = { field : "deptName", title : "部門" ,align: "center", valign: "middle",width:120};

var t4 = { field : "groupName", title : "考勤組" ,align: "center", valign: "middle",width:120};

columns.push(t1);columns.push(t2);columns.push(t3);columns.push(t4);

var h = $(window).height() - 100;

$("#table").bootstrapTable("destroy")

.bootstrapTable(

{

method : "get", // 伺服器資料的請求方式 get or post

url : "/attendance/record/recordList", // 伺服器資料的載入地址

height:h,

iconSize : "outline",

striped : true, // 設定為true會有隔行變色效果

dataType : "json", // 伺服器返回的資料型別

pagination : true, // 設定為true會在底部顯示分頁條

// queryParamsType : "limit",

// //設定為limit則會發送符合RESTFull格式的引數

singleSelect : false, // 設定為true將禁止多選

// contentType : "application/x-www-form-urlencoded",

// //傳送到伺服器的資料編碼型別

pageList: [ 5, 10, 20],

pageSize : 5, // 如果設定了分頁，每頁資料條數

pageNumber : 1, // 如果設定了分佈，首頁頁碼

//search : true, // 是否顯示搜尋框

showColumns : false, // 是否顯示內容下拉框（選擇顯示的列）

sidePagination : "server", // 設定在哪裡進行分頁，可選值為"client" 或者 "server"

queryParams : function(params) {

return {

//說明：傳入後臺的引數包括offset開始索引，limit步長，sort排序列，order：desc或者,以及所有列的鍵值對

limit: params.limit,

offset:params.offset

};

},

columns:columns,

fixedColumns: true,

fixedNumber: 5

});

$("#table").colResizable();

};

---------------------

原文：https://blog.csdn.net/bestdoufu/article/details/80325038