div_固定table表头

け凨浩
关注文章
TinyMind专栏频道

1、js+div

其实基本思路跟方法2是一样的，只是更进一步，不在用table了，直接用div替代table来显示数据。
这样做的主要好处是，可以比较方便的把它扩展成一个Grid widget，由于不使用table了，不用再维护一套操作table DOM的代码。因为行都是用div拼成的，增加排序、列宽调整、直接编辑等功能都会方便一点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定：使用js和div实现</title>
<style>
.table{
	position:relative;
	overflow:hidden;
	border:black 1px solid; 
	BACKGROUND: #F8F9FC;
	z-index:10;
}
.title /* 表头行 */{
	position:relative;
	overflow:hidden;
	z-index:10;
}
.title span{
	BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	BACKGROUND: #ccc;
	overflow:hidden;
	WHITE-SPACE: nowrap;
	position:relative;
	display:inline-block;
}
.content /* 内容区 */{
	position:relative;
	overflow:hidden;
}
.content span{
	BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	overflow:hidden;
	WHITE-SPACE: nowrap;
	position:relative;
	display:inline-block;
}
.vscroll{
	position:absolute;
	right:0px;
	top:0px;
	height:100%;
	width:10px;
	background:#f1f1f1;
	border:#CCF 1px solid;
	overflow:hidden;
	z-index:10;
}
.hscroll{
	position:absolute;
	bottom:0px;
	left:0px;
	height:10px;
	width:100%;
	background:#f1f1f1;
	border:#CCF 1px solid;
	overflow:hidden;
	z-index:10;
}
.vglide /* 滑块样式 */{
	position:absolute;
	z-index:10;
	top:0px;
	left:0px;
	width:100%;
	height:20px;
	overflow:hidden;
	background:#666666
}
.hglide /* 滑块样式 */{
	position:absolute;
	z-index:10;
	top:0px;
	left:0px;
	width:20px;
	height:100%;
	overflow:hidden;
	background:#666666
}
.fillbox{
	position:absolute;
	height:10px;
	width:10px;
	bottom:0px;
	right:0px;
	background:#f1f1f1;
	border:#CCF 1px solid;
	z-index:10;
}
</style>
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //初始化title
  var tWidth = 0;
  $("#title span").each(function(i){
    $(this).width("60px");
	tWidth += $(this).outerWidth();
  });
  $("#title").width(tWidth);
  //初始化content
  $("#content span").each(function(i){
    $(this).width("60px");
  });
  $("#content").width(tWidth);
  //content的可视区域
  var visualH = $("#table").height() - $("#title").height() - $("#hScroll").height();
  var visualW = $("#table").width() - $("#vScroll").width();

  //初始化滚动条和滑块尺寸
  $("#vScroll").height($("#table").height() - $("#hScroll").height());
  var gHeight = $("#vScroll").height()*(visualH/$("#content").height());
  $("#vGlide").height(gHeight);

  $("#hScroll").width($("#table").width() - $("#vScroll").width());
  var gWidth = $("#hScroll").width()*(visualW/$("#content").width());
  $("#hGlide").width(gWidth);

  //拖拽方法
  var scrolling = 0;
  function StartDrag(event){scrolling=event.data.type;}
  function Draging(event){
    if (scrolling == 1) vScrollTo(event);
    else if (scrolling == 2) hScrollTo(event);
  }
  //垂直滚动
  function vScrollTo(event){
    var event=event?event:(window.event?window.event:null);
	  var Y=event.clientY-$("#table").offset().top-$("#vGlide").height()/2;
	  if (Y > $("#vScroll").height() - $("#vGlide").height())
	    Y = $("#vScroll").height() - $("#vGlide").height();
	  if (Y < 0)
	    Y = 0;

    var H=$("#vScroll").height();
    var SH=Y/H*$("#content").get(0).scrollHeight;
	  $("#vGlide").css("top",Y + "px");
    $("#content").css("top",-SH + "px");
  }
  //水平滚动
  function hScrollTo(event){
    var event=event?event:(window.event?window.event:null);
	  var X=event.clientX-$("#table").offset().left-$("#hGlide").width()/2;
  	if (X > $("#hScroll").width() - $("#hGlide").width())
  	  X = $("#hScroll").width() - $("#hGlide").width();
  	if (X < 0)
  	  X = 0;

    var W=$("#hScroll").width();
    var SW=X/W*$("#content").get(0).scrollWidth;
	  $("#hGlide").css("left",X + "px");
    $("#content").css("left",-SW + "px");
	  $("#title").css("left",-SW + "px")
  }
  
  //滚轮处理
  function ScrollWheel(event, delta){
    var Y=$("#vGlide").position().top;
    var H=$("#vScroll").height();
    if (delta >= 0) {Y=Y-20;} else {Y=Y+20;}
    
    if (Y > $("#vScroll").height() - $("#vGlide").height())
	    Y = $("#vScroll").height() - $("#vGlide").height();
	  if (Y < 0)
	    Y = 0;

    var H=$("#vScroll").height();
    var SH=Y/H*$("#content").get(0).scrollHeight;
	  $("#vGlide").css("top",Y + "px");
    $("#content").css("top",-SH + "px");
  }

  //注册事件
  $("#vScroll").bind("click",vScrollTo);
  $("#hScroll").bind("click",hScrollTo);
  $("#vGlide").bind("mousedown",{type:1},StartDrag);
  $("#hGlide").bind("mousedown",{type:2},StartDrag);
  $(document).bind("mousemove",Draging);
  $(document).bind("mouseup",function(){scrolling=0;});
  $("#table")[0].onselectstart = function(){return false;};
  $("#table").bind("mousewheel",ScrollWheel);
});

</script>
</head>

<body>
<div id="table" class="table" style="width:300px;height:200px">
	
	  <div id="title" class="title">
    	<span>标题1</span><span>标题2</span><span>标题3</span><span>标题4</span><span>标题5</span><span>标题6</span><span>标题7</span><span>标题8</span><span>标题9</span>
    </div>
    <div id="content" class="content">
        <div><span>内容1</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容1</span><span>内容1</span></div>
        <div><span>内容2</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容2</span><span>内容2</span></div>
        <div><span>内容3</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容3</span><span>内容3</span></div>
        <div><span>内容4</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容4</span><span>内容4</span></div>
        <div><span>内容5</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容5</span><span>内容5</span></div>
        <div><span>内容6</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容6</span><span>内容6</span></div>
        <div><span>内容7</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容7</span><span>内容7</span></div>
        <div><span>内容8</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容8</span><span>内容8</span></div>
        <div><span>内容9</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容9</span><span>内容9</span></div>
        <div><span>内容10</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容10</span><span>内容10</span></div>
        <div><span>内容11</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容11</span><span>内容11</span></div>
		    <div><span>内容12</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容12</span><span>内容12</span></div>
		    <div><span>内容13</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容13</span><span>内容13</span></div>
		    <div><span>内容14</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容14</span><span>内容14</span></div>
        <div><span>内容15</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容15</span><span>内容15</span></div>
		    <div><span>内容16</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容16</span><span>内容16</span></div>
		    <div><span>内容17</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容17</span><span>内容17</span></div>
		    <div><span>内容18</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容18</span><span>内容18</span></div>
        <div><span>内容19</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容19</span><span>内容19</span></div>
		    <div><span>内容20</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容20</span><span>内容20</span></div>
		    <div><span>内容21</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容21</span><span>内容21</span></div>
		    <div><span>内容22</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容22</span><span>内容22</span></div>
        <div><span>内容23</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容23</span><span>内容23</span></div>
		    <div><span>内容24</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容24</span><span>内容24</span></div>
		    <div><span>内容25</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容</span><span>内容25</span><span>内容25</span></div>
    </div>
	
    <div id="hScroll" class="hscroll"><div id="hGlide" class="hglide"></div></div>
    <div id="vScroll" class="vscroll"><div id="vGlide" class="vglide"></div></div>
    <div class="fillbox"></div>
</div>
</body>
</html>

2.js+table

1、使用js生成一个新的标题行，放在一个div中做为一个新表头。新建的表头，可以使用div内嵌span的方式来模拟；也可直接建一个新的table
2、将原table，放在另一个div中，同时删除表头
3、增加js代码，保持table在水平滚动时，新表头的div也会随着一起移动，保证表头和列的位置始终一致,整个表格被分到2个div中，一个放表头，一个放table。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定：使用js和table实现</title>
<style type=text/css>
.griddiv{
	overflow-x:hidden;
	border:black 1px solid; 
	BACKGROUND: #F8F9FC;
	position:relative;
}
.title /* 新建表头样式 */{
	BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	BACKGROUND: #ccc;
	CURSOR: hand;
	Font-Size:9pt;
	overflow:hidden;
	WHITE-SPACE: nowrap;
	position:relative;
	display:inline-block;
}
td{
	WHITE-SPACE: nowrap;
	BORDER: #ddd 1px solid;
}
.cdata {
  padding:1 1 1 2;
  Font-Size:9pt;
}
</style>
</head>
<body>
<div class='griddiv' id='griddiv'>
 <div id="titlediv" style='position:relative;BACKGROUND: red'></div>
 <div id="tablediv" style='overflow-x:scroll;overflow-y:scroll' onscroll='SYNC_Roll(this)'>
  <table id="tb" width='100%' border="0" cellpadding="0" cellspacing="0">
   <tr id="titletr"><td>标题1</td><td>标题2</td><td>标题3</td></tr>
   <tr class='cdata'><td>内容内容1内容1内容1内容1内容1内容11</td><td>内容22222222222222222222222222222</td><td>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
  </table>
 </div>
</div>
<script language=javascript>
	var gdiv=document.getElementById("griddiv");      //最外层的div
	var titdiv=document.getElementById("titlediv");   //新建表头的div
	var tbdiv=document.getElementById("tablediv");    //包裹table的div
	var tb=document.getElementById("tb");             //table
	var tr=document.getElementById("titletr");        //table内的表头
	
	//创建新的表头，同时删除原来table中的表头
  function createtitle(tdiv,ttb,ttr){ 
    tdiv.style.width=ttb.clientWidth+"px";
    var newtit="";
    for(i=0;i<ttr.cells.length;i++)
    { 
       var ttd=ttr.cells[i];
       newtit=newtit+"<span class='title' style='width:"+(ttd.clientWidth)+"px'>"+ttd.childNodes[0].nodeValue+"</span>"
    }
    tdiv.innerHTML=newtit;
    
    //删除原表头 
    if (ttr.rowIndex!=ttb.rows.length-1)
      ttb.deleteRow(ttr.rowIndex);  
  }
  
  //使新建表头div，随水平滚动条滚动
  function SYNC_Roll(obj){
     titdiv.style.left=-obj.scrollLeft+"px";
  }  
  
  function SetGrid(awidth,aheight){  
     gdiv.style.width=awidth + "px";
     tbdiv.style.width=awidth + "px";
     tbdiv.style.height=aheight + "px";
     createtitle(titdiv,tb,tr); 
  }  
  SetGrid(500,300);
</script>
</body>
</html>

3、css+table

在table外面套个div限制显示大小，同时设置表头单元格的样式为
position: relative;
top: expression(document.getElementById("div").scrollTop);
其中express是IE自带的CSS属性，可以在CSS中调用js代码。

这里通过express中的js可以让单元格总是固定在div的最上部，不随垂直滚动条滚动。

类似的－也可以设置left: expression(document.getElementById("div").scrollLeft)，来冻结某一列不随水平滚动条滚动。当然若同时设置left和top样式，则这些单元格始终不会滚动。

说明：
1、使用express来做表头固定，是最简单的，只需CSS即可，且可以支持多表头和列固定的情况
2、express是IE自带的CSS属性，在其他浏览器上都不支持；据网上的资料，express的执行效率可能有问题，鼠标移动时都会触发对应的js代码。使用需慎重！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定：使用CSS实现</title>
<style type="text/css" >
div.DivContainer /* Div */{
    overflow: scroll;
    border: solid 1px gray;
}
table {
    border-collapse: collapse;
    border:solid 1px gray;
}
td {
    position: relative;
    padding: 5px;
    border-top: solid 0px gray;
    border-bottom: solid 1px gray;
    border-left: solid 0px gray;
    border-right: solid 1px gray;
}
td.HLocked /*左侧冻结的列*/ {
    z-index: 10;
    position: relative;
	left: expression(document.getElementById("div").scrollLeft);
    text-align: center;
    BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	BACKGROUND: #ccc;
}
td.VLocked /*垂直固定的表头*/ {
    z-index: 20;
    position: relative;
    top: expression(document.getElementById("div").scrollTop);
    color: black;
    text-align: center;
    BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	BACKGROUND: #ccc;
}
td.Locked /*垂直、水平都固定的表头*/ {
    z-index: 30;
    position: relative;
    top: expression(document.getElementById("div").scrollTop);
    left: expression(document.getElementById("div").scrollLeft);
    color: black;
    text-align: center;
    BORDER-RIGHT: #555 1px solid;
	BORDER-TOP: #fff 1px solid;
	BORDER-BOTTOM: #555 1px solid;
	BORDER-LEFT: #fff 1px solid;
	padding:2 1 2 2;
	BACKGROUND: #ccc;
}
</style>
</head>
<body>
<div id="div" class="DivContainer" style="width: 400px; height: 250px;">
<table>
    <tr>
      <td class="Locked" colspan="4">Locked</td>
      <td class="VLocked">VLocked</td>
      <td class="VLocked">VLocked</td>
      <td class="VLocked" rowspan="3">VLocked</td>
      <td class="VLocked" rowspan="3">VLocked</td>
    </tr>
    <tr>
      <td class="Locked" colspan="2">Locked</td>
      <td class="Locked" colspan="2">Locked</td>
      <td colspan="2" class="VLocked"></td>
    </tr>
    <tr>
      <td class="Locked">Locked</td>
      <td class="Locked">Locked</td>
      <td class="Locked">Locked</td>
      <td class="Locked">Locked</td>
      <td class="VLocked"></td>
      <td class="VLocked"></td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td>45</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>52</td>
      <td>53</td>
      <td>54</td>
      <td>55</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>62</td>
      <td>63</td>
      <td>64</td>
      <td>65</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>72</td>
      <td>73</td>
      <td>74</td>
      <td>75</td>
    </tr>
    <tr>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td class="HLocked">HLocked</td>
      <td>82</td>
      <td>83</td>
      <td>84</td>
      <td>85</td>
    </tr>
</table>
</div>
</body>
</html>

优质内容筛选与推荐>>
1、<html>
2、一百万能买起你的另一半吗?
3、Java基础加强之并发（一）基本概念介绍
4、gcc Debug版本生成
5、大便的离去,是马桶的追求?还是肛门的不挽留?


长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消，“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字，当前共字 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字，当前共字

    发送中

    网络异常，请稍后重试

    微信扫一扫
    关注该公众号

    0 │ 收藏 │ 举报




    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议，举报不良信息等均可联系我们。

    TinyMind客服邮箱：support@tinymind.net.cn

    TinyMind.net.cn，专业AI技术社区