bootstrap-table表头内容不对齐的问题

╰+攻爆jí腚メ 2021-11-27 04:20 623阅读 0赞

.table\_list\_box\{  
   table-layout:fixed !important;  
\}  
 table-layout:fixed就能解决表格不对齐的问题，

//解决当浏览器窗口变化是，表头与表格不对齐
    $(window).resize(function () {
         $('#table').bootstrapTable('resetView');
      });

`$('#table').bootstrapTable('destroy').bootstrapTable({                 //是否启用排序         sortable: true,         height:330,         fixedColumns: true,          columns: [             [{               field: 'name',                 title: "名称",                 valign:"middle",                 align:"center",                 colspan: 1,                 rowspan: 2,                 width:"20%",                 sortable : true             },             {                 title: tableheader,                 valign:"middle",                 align:"center",                 width:"60%",                 colspan: 3,                 rowspan: 1             },             {                 title: "操作",                 valign:"middle",                 align:"center",                 colspan: 1,                 rowspan: 2,                 width:"20%",                 formatter:formatterButton             }],             [{                 field: 'yesterday',                 title: '昨日',                 valign:"middle",                 align:"center",                 width:"20%",                 sortable : true             },             {                 field: 'month',                 title: '月',                 valign:"middle",                 align:"center",                 width:"20%",                 sortable : true             },             {                 field: 'year',                 title: '年',                 valign:"middle",                 align:"center",                 width:"20%",                 sortable : true             },             {                 field: 'id',                 title: 'id',                 valign:"middle",                 align:"center",                 width:"0%",                 visible:false             }            ]         ]     });`

`function formatterButton(value, row ,index){     if(row.isHaveChild){         return "<button type='button' class='viewBTN btn btn-info btn-sm' style='margin:2px;' onclick='showChildren("+row.id+")'>查看下级</button>"+         "<buttontype='button' class='btn btn-primary btn-sm hisBTN' data-toggle='modal' data-target='#myHistoryModal' style='margin:2px;' pId='"+row.id+"'>历史数据</button>";     }else{         return  "<button type='button' class='viewBTN btn btn-info btn-sm' style='margin:2px;background-color: #999;border-color: #999'>查看下级</button>"+         "<buttontype='button' class='btn btn-primary btn-sm hisBTN' data-toggle='modal' data-target='#myHistoryModal' style='margin:2px;' pId='"+row.id+"'>历史数据</button>";     } }`