这里主要解决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>
更多推荐
bootstrap table 自适应高度+列错位
发布评论