js css style动态设置table高度

最新推荐文章于 2025-10-27 08:54:37 发布

原创最新推荐文章于 2025-10-27 08:54:37 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种通过JavaScript动态调整表格高度的方法，适用于需要根据页面实际可用空间调整表格展示行数的场景。文中提供了两个函数：`com_onresize`用于根据当前浏览器可视区域高度动态调整两个表格的高度；`com_sbs_pagesize`则更进一步，考虑了屏幕分辨率、表格头部及按钮高度等因素，以确保表格在不同设备上都有良好的显示效果。

部署运行你感兴趣的模型镜像

设置table高度想必大家都会，直接在table标签中设置下不就行了吗？这是静态的，如果要动态设置你会吗？下面的实例将教会大家直接在table标签中设置下不就行了吗？这是静态的，如果要动态设置你会吗？

function com_onresize(){

var contentsHeight = document.body.clientHeight;
var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
var head1Height = document.getElementById( "head1" ).offsetHeight;
var head2Height = document.getElementById( "head2" ).offsetHeight;

var t1 = document.getElementById( "TableContainer1" ).style.height;
var t2 = document.getElementById( "TableContainer2" ).style.height;

//alert(document.getElementById( "TableContainer1" ).style.height);
var h = contentsHeight - buttonsHeight - head1Height - head2Height - 13;
if(h < 110){
return;
}
document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';
document.getElementById( "TableContainer2" ).style.height = h/2 + 'px';
}
function com_sbs_pagesize(){
var screenHeight = window.screen.height;
  var availHeight = window.screen.availHeight;
  //alert(document.getElementById( "TableContainer1" ).children[0].rows.length);
  var index = document.getElementById( "TableContainer1" ).children[0].rows.length
  var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
var head1Height = document.getElementById( "head1" ).offsetHeight;
var head2Height = document.getElementById( "head2" ).offsetHeight;

  var mainH = buttonsHeight + head1Height +head2Height + 13;
  //20:scroll 35:title 25:tr
  while ((availHeight-mainH) < (20 + 35 + 25*index)*2)
{
 index = index - 1;
}
var tableHeight = 20 + 35 + 25*index;
  document.getElementById( "TableContainer1" ).style.height = tableHeight + 'px';
  document.getElementById( "TableContainer2" ).style.height = tableHeight + 'px';
  window.resizeTo(document.body.offsetWidth,mainH + tableHeight*2);
}

您可能感兴趣的与本文相关的镜像