bootstrap table 自适应高度+列错位

原创已于 2022-07-28 15:57:37 修改 · 7.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #bootstrap

于 2020-11-13 10:34:51 首次发布

JAVA WEB菜鸟专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在BootstrapTable中根据数据量动态设置表格高度，并解决数据量变化引起的列错位问题。通过JavaScript函数实现表格高度自适应，同时针对不同数据量展示效果进行展示。此外，还提供了针对时间控件样式冲突的解决方案，确保表格布局的正常显示。

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

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

直接上代码：

1、表格div

<div class="box-body" style="overflow: auto;" id="out_table_gzlmx_ks">
    <table class="table-container" id="table_gzlmx_ks">
    </table>
</div>

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

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);
    }
}

效果：

数据少：

数据量大：

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

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

<style>
   table {
            table-layout: fixed;
        }
</style>

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

<style>
    td{
        white-space:nowrap;
        overflow:hidden;
        word-break:keep-all;
    }
    /**
    直接 table  影响时间控件
     **/
    @-moz-document url-prefix(){    /*Firefox*/
        .jxtj table {
            table-layout: fixed;
        }
    }
    @media screen and (-webkit-min-device-pixel-ratio:0){ /*写在选择器外层时（只可写在此处）：Chrome only*/
        .jxtj table {
            table-layout: fixed;
        }
    }
</style>

<div class="row jxtj jxtjYj">
    <div class="col-md-12 both-pd7">
        <div class="tab-pane fade in active">
            <div class="box win-box">
                <div class="box-header">
                    <i class="fa box-search"></i>
                    <div class="box-title">(一级表）科室总绩效统计</div>
                </div>
                <div class="box-body" style="overflow: auto;" id="out_table_jxtjYj">
                    <table class="table-container" id="table_jxtjYj">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>