bootstrap table 自适应高度+列错位

这里主要解决bootstrap table 数据过多时固定高度,数据少时以数据量决定高度。

这里是带底部的表格,其他情况可能稍有出入:

直接上代码:

1、表格div

2、初始化表格,加载数据,注意核心标记

bootstrap table 自适应高度+列错位_第1张图片

3、自适应方法

function getTableHeight() {
    return  $(window).height()-450;
}
function resizeTableHeightKs(dataLen) {
    debugger;
    if(dataLen==0){
        dataLen=1;
    }
    var a = $("#table_gzlmx_ks").first().find('tr').last().height() * (dataLen);
    if (a > getTableHeight()) {
        $('div#out_table_gzlmx_ks .fixed-table-container').height(getTableHeight());
    } else {
        $('div#out_table_gzlmx_ks .fixed-table-container').height(a);
    }
}

效果:

数据少:

bootstrap table 自适应高度+列错位_第2张图片

数据量大:

bootstrap table 自适应高度+列错位_第3张图片

4、这时列会错位,主要是指定height导致

4.1 后遗症:因为是全局,影响了时间控件fa fa-calendar

4.2解决4.1后遗症:让table-layout: fixed在具体的table范围生效

jxtj jxtjYj">
(一级表)科室总绩效统计

你可能感兴趣的:(JAVA,WEB菜鸟,javascript,html,bootstrap)