前提：引入對應的js,css

<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.css"
 
>

<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 class="table-responsive" style="z-index: 1;">
   <table class="table" id="table" style="min-width:100px;"></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();
};