.fixed-table-header-columns, .fixed-table-body-columns { position: absolute; background-color: #fff; display: none; box-sizing: border-box; overflow: hidden; } .fixed-table-header-columns .table, .fixed-table-body-columns .table { border-right: 1px solid #ddd; } .fixed-table-header-columns .table.table-no-bordered, .fixed-table-body-columns .table.table-no-bordered { border-right: 1px solid transparent; } .fixed-table-body-columns table { position: absolute; animation: none; } .bootstrap-table .table-hover > tbody > tr.hover > td { background-color: #f5f5f5; }

如何使用呢？这里博主单独搞了一个静态的html测试页，还是贴出来供大家参考。

<div> <div>查询条件</div> <div> <form> <div> <label for="name">员工姓名</label> <div> <input type="text"> </div> <label for="address">家庭住址</label> <div> <input type="text"> </div> <div> <button type="button">查询</button> </div> </div> </form> </div> </div>新增 操作姓名年龄学校家庭住址备注关闭保存 [ { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, { Id: }, ]; [ { SourceField: }, { SourceField: }, { SourceField: }, ]; $(function () { ).bootstrapTable({ data: data, (params) { return params; }, , showColumns: showRefresh: , selectItemName: , fixedColumns: true, fixedNumber: 6, (index, row, $detail) { InitSubTable(index, row, $detail); }, columns: [{ checkbox: true }, { field: , title: , width:200 }, { field: , title: , width:200 }, { field: , title: , width:200 }, { field: , title: , width:100 }, { field: , title: , width:100 }, { field: , title: , width:100 }, { field: , title: , width:100 }, { field: , title: , width:100 }, { field: , title: , width:100 }, { field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ field: , title: , width:100 },{ title: , width:200, formatter: ; return html; } }], onEditableSave: function (field, row, oldValue, $el) { alert( oldValue); } }); () { $(); ).modal(); ); $(); }); }); (index, row, $detail) { row.MENU_ID; ); //子表的初始化和父表完全相同 $(cur_table).bootstrapTable({ //url: '/api/MenuApi/GetChildrenMenu', data: childData, method: , queryParams: { strParentID: parentid }, ajaxOptions: { strParentID: parentid }, clickToSelect: true, uniqueId: , pageSize: 10, pageList: [], selectItemName: index, checkboxHeader:false, columns: [{ checkbox: true }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }, { field: , title: }], (index, row, $Subdetail) { //oInit.InitSubTable(index, row, $Subdetail); } }); }; (id) { , id); ).modal(); ).val(row.Name); $().val(row.Age); $().val(row.School); $().val(row.Address); $().val(row.Remark); } (id) { alert(); }

 代码释疑：