bootstrap table固定表头 以及 表头与表体对齐

1.表头与表体对齐

第一步：给table加  table-layout:fixed

.bootstrap-table .table{
   table-layout:fixed;
}

第二部：给表的每一列加宽度

columns: [{  
    checkbox : true,  
    title : '复选框', 
    field : 'pkid1',  
    halign:'center',
    align : 'center'
}, {  
    title : '序号',  
    field : 'pkid',  
    halign:'center',
    align : 'center' ,
    sortable:true,
    width:80
}, {  
    title : '主键',  
    field : 'S_XSGL_ID',  
    halign:'center',
    align : 'center' ,
    visible:false,
    width:80
}, {  
   title : '学校名称',  
    field : 'S_XSGL_XXMC',  
    halign:'center',
    align : 'center',
    width:200
},{  
    title : '项目名称',  
    field : 'S_XSGL_XMMC',  
    halign:'center',
    align : 'center',
    width:200
}, /*{  
    title : '修缮编号',  
    field : 'S_XSGL_BH',  
    halign:'center',
    align : 'center',
    width:120
}, */{  
    title : '预算执行年份',  
    field : 'S_XSGL_XMNF',  
    halign:'center',
    align : 'center',
    width:160
}, {  
    title : '校区',  
    field : 'S_XSGL_XQ',  
    halign:'center',
    align : 'center',
    width:100
}, {  
    title : '地址',  
    field : 'S_XSGL_DZ',  
    halign:'center',
    align : 'center',
    width:200
}, {  
    title : '总资金（万元）',  
    field : 'S_XSGL_ZZJ',  
    halign:'center',
    align : 'center',
    width:120
}]

2.bootstrap table固定表头(主要的步骤：给表格加固定高度)

function initTableall(){
   //获取表格父元素的高度，以便于赋值给表格
   var tableHeight = metTable_a.parent().height();
   if(tableHeight<500){
      tableHeight=500;
   }
   //先销毁表格  
    $('#dataTable').bootstrapTable('destroy');  
    //初始化表格,动态从服务器加载数据  
    $('#dataTable').bootstrapTable({
        url: '/singb/school/getAllSchoolInfoByConditionPage',  //请求后台的URL（*）
        height:tableHeight,  //获取父元素的高度，也可以自定义高度，此处设置上如果效果不满意，可以通过媒体查询的方式设置body    //的宽度来达到需要的效果,信息信息看下图
        method: 'post',                     //请求方式（*）
        dataType: "json",              //返回数据类型
        toolbar: '#exampleToolbar',         //工具按钮用哪个容器
        striped: true,                     //是否显示行间隔色
        cache: false,                          //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        locale:'zh-CN',
        pagination: true,                      //是否显示分页（*）        
        ajaxOptions: {async: false, timeout: 10000},
        sortOrder: "desc",                  //排序方式
        clickToSelect : false,          // 点击行即可选中单选/复选框
        queryParams: function queryParams(params){ //传递参数（*）
          var temp = {
            'pageSize' : params.pageSize,
            'pageNum' :  params.pageNumber,
          };
          return temp;
        },    

      pageSize: 20,                  //页面大小 每页显示条数
      pageNumber: 1,               //初始化加载第一页，默认第一页
      pageList:[20],      //设置表格每页显示的记录        
      showToggle: false,            //名片格式
      showColumns: true,              //显示隐藏列   
      showRefresh: false,    //显示刷新按钮
      singleSelect: false,   //复选框只能选择一条记录
      search: false,       //是否显示右上角的搜索框
      clickToSelect: true,   //点击行即可选中单选/复选框
      queryParamsType : "",    //查询参数组织方式 ，参数格式,发送标准的RESTFul类型的参数请求
      sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）    
      silent: true,          //刷新事件必须设置
      contentType : "application/json",    //请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理 
      responseHandler: function (e) {//配置公办表格接受返回的配置项
            //判断是否有返回数据，有的话加载  没有加提示信息
            if (e.data.data.records && e.data.data.records.length > 0) {
                return { "rows": e.data.data.records, "total": e.data.data.total };
            }
            else {
                return { "rows": [], "total": 0 };
            }
      },     
      onLoadError: function (data) {
         $("#dataTable").bootstrapTable('removeAll');
         //toastr["info"]("info", "没有找到匹配的记录");
      },
     onLoadSuccess: function(data){
          //返回数据成功后的回调函数
     },    
     columns: [{
       title: '全选',
       checkbox: true,
       align: "center",//水平
       valign: "middle"//垂直
      },{
          field: 'rowId',
          title: '序号',
          align:'center',
          visible: true,
      }, {
          field: 'schByThree',
          title: '学校编号',
          align:'center',
          cellStyle:formatTableUnit,
          visible: true
      },{
          field: 'schoolNam',
          title: '学校名称',
          align:'center',
          cellStyle:formatTableUnit,
          visible: true
      }
     {
        field: 'sfdb',
        title: '是否达标',
        align:'center',
        visible: false,
        formatter: function(value,row,inde){
           var result = value;
           if(value == "1"){
               result = "是";
           }else if(value == "0"){
               result = "否";
           }
          return result;
         }
    }]
  });    
}

//媒体查询设置高度，本项目的适配需求（主要针对特殊情况的处理方式）

@media screen and (max-width:1360px) and (min-width:960px){
   .fixed-table-body{
   height:310px;
 }
} 
@media screen and (max-width:1600px) and (min-width:1361px){
   .fixed-table-body{
   height:335px;
 }
}
@media screen and (max-width:1920px) and (min-width:1601px){
   .fixed-table-body{
   height:650px;
 }
}