可滚动div内的冷冻表头

我有三个div.标题,中心和页脚.中央div(gridview)中有一个表,它几乎总是比外部div长.所以我把这个div垂直滚动了.问题是:如何在div向下滚动后显示表头？我可以使用单独的div或表完成此标题并使其固定但表中列的宽度并不总是相同 - 所以我不知道如何在标题中保持列的宽度.任何线索？

我刚刚整理了一个完全符合你想要的jQuery插件.它非常小,非常容易实现.

所需要的只是一个包含thead和tbody的表.

您可以使用类名将该表包装在DIV中,并且该表将始终调整大小以适合该div.例如,如果您的div与浏览器窗口一起缩放,那么表格也是如此.滚动时将固定标题.页脚将被固定(如果您启用页脚).您还可以选择在页脚中克隆标题并将其修复.此外,如果您使浏览器窗口太小而且所有列都不适合......它也会水平滚动(标题也是如此).

你只需将DIV的类名传递给插件就像这样:$('.myDiv').fixedHeaderTable({footer:true,footerId:'myFooterId'}); 而插件将完成剩下的工作.FooterID是页面上包含页脚标记的元素.如果您希望将分页作为页脚,则使用此选项.

如果页面上有多个表,它也适用于您希望拥有固定标题的每个表.

在这里查看:http://fixedheadertable.mmalek.com/

请记住它仍然是'beta',因此我每天都会添加新功能和错误修复程序.

支持的浏览器:IE6,IE7,IE8,FireFox,Safari和Chrome

解决方案非常简单.你需要3个DIV:一个普通的容器(在我的类中是"外部"),一个表容器(在我的类中是"inner")和一个DIV,你可以使用jQuery或javaScript克隆一个现有的表(在我的类"标题"的情况下).

解决方案使用CSS和几行jQuery代码,将"inner"的HTML克隆到"header"中并设置其宽度和高度.支持固定和可变列宽.经过IE8,Firefox 9,Safari和谷歌Chrome的测试.

这是一个示例代码:

    	$(document).ready(function() {
    		$('.header').html( $('.inner').html() );
    		$('.header').css('width', $('.inner table').outerWidth() );
    		$('.header').css('height', $('.inner table thead').outerHeight() );
    	});

table {
  width:100%;
}
th {
  border-top:1px solid #999;
  text-align:left;
}
td, th {
  border-bottom:1px solid #999;
  background-color:#EEE;
}
.outer {
  position:relative;
  width:500px;
}
.inner {
  height:150px;
  overflow:auto;
}
.header {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}

  

    

      

        

          
a
          
b
          
c
          
d
        
      
      

        
1
b
c
d
        
2
b
c
d
        
3
b
c
d
        
4
b
c
d
        
5
b
c
d
        
6
b
c
d
        
7
b
c
d
        
8
b
c
d
        
9
b
c
d
        
10
b
c
d
        
11
b
c
d
        
12
b
c
d
      
    
  

  

  

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }