表格(table)列太多,实现固定列,滚动条滑动

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iteye_8157/article/details/82679381

效果如下图所示。

 最左边的四列,以及最后一列为固定列。中间的为滚动列。

具体实现思路:

创建三个表格。

左边四列为table1;中间多列为table2,右边四列为table3.

<div style="width:17%;float:left;clear:both;">

<table id="table1"  width="100%"></table>

</div>

<div style="width:74%;float:left;overflow-x:scroll;"> //需要横向滚动条,设置overflow-x:scroll

<table id="table2"  width="150%"></table> //滚动范围,设置宽度为150%(酌情修改)

</div>

 <div style="width:8%;float:left;">

 <table id="table3"  width="100%"></table>

 </div>

 

这样设计过后,基本实现三分格局,但是由于内容填充,可能会出现行不等高问题。此时,需要在页面加载完成后,执行如下代码:

  var arr1=[];
  var arr2=[];
  var arr3=[];
  $("#table1 tr").each(function(e){
      arr1[e]=$(this).height();
  });
  $("#table2 tr").each(function(e){
      arr2[e]=$(this).height();
  });
  $("#table3 tr").each(function(e){
      arr3[e]=$(this).height();
  });
  for(var i=0;i<arr1.length;i++){
      if(arr1[i]>=arr2[i]){
          $("#table2 tr:eq("+i+")").css("height",arr1[i]);
      }else{
          $("#table1 tr:eq("+i+")").css("height",arr2[i]);
      }
      if(arr1[i]>=arr3[i]){
          $("#table3 tr:eq("+i+")").css("height",arr1[i]);
      }else{
          $("#table1 tr:eq("+i+")").css("height",arr3[i]);
          $("#table2 tr:eq("+i+")").css("height",arr3[i]);
      }
  }

缺点,扩展和通用性不佳,但是基本需求可以达到。

 

 

展开阅读全文

没有更多推荐了,返回首页