固定（冻结）table第一行的列名

最新推荐文章于 2024-05-21 09:51:52 发布

asir007

最新推荐文章于 2024-05-21 09:51:52 发布

阅读量846

点赞数

分类专栏： CSS 文章标签： JavaScript JSP Cache HTML ViewUI

本文链接：https://blog.csdn.net/asir007/article/details/83521849

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	function   fixupFirstRow(tab) {   
    		var   div   =   tab.parentNode;   
    		if(div.className.toLowerCase()   ==   "freezediv"){   
	          tab.rows[0].style.zIndex   =   "1";   
	          tab.rows[0].style.position   =   "relative";   //IE7支持不好,IE8 不支持
	          div.onscroll   =   function()   
	          {   
	              var   tr   =   tab.rows[0];   
	              tr.style.top   =   this.scrollTop   -   (this.scrollTop==0   ?   1   :   2);   
	              tr.style.left   =   -1;   
	          } 
	            
   			 }   
  	} 
  	
  	window.onload   =   function(){   
        var   tab   =   document.getElementById("freezedivTable"); 
          
        if(tab){
           fixupFirstRow(tab);
           }   
      }   
	
	</script>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript">
	function   fixupFirstRow(tab) {   
    		var   div   =   tab.parentNode;   
    		if(div.className.toLowerCase()   ==   "freezediv"){   
	          tab.rows[0].style.zIndex   =   "1";   
	          tab.rows[0].style.position   =   "relative";   
	          div.onscroll   =   function()   
	          {   
	              var   tr   =   tab.rows[0];   
	              tr.style.top   =   this.scrollTop   -   (this.scrollTop==0   ?   1   :   2);   
	              tr.style.left   =   -1;   
	          } 
	            
   			 }   
  	} 
  	
  	window.onload   =   function(){   
        var   tab   =   document.getElementById("freezedivTable"); 
          
        if(tab){
           fixupFirstRow(tab);
           }   
      }   
	
	</script>

  </head>
  
  <body>

    
    
<div class=freezediv   style="width:   100%;   height:   140;   overflow:   auto;">   
<table id=freezedivTable >

	
	 	<tr>
        	<th nowrap="nowrap">序号</th>        	
        	<th nowrap="nowrap">内容</th>
		</tr>
		<tr>
        	<th nowrap="nowrap">序号</th>        	
        	<th nowrap="nowrap">内容</th>
		</tr>
		<tr>
			<td>1</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>2</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>3</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>4</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>5</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>6</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>7</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>8</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>9</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>10</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>11</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>12</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>13</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>14</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>15</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>16</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>17</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>18</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>19</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>20</td>
			<td>内容</td>
		</tr>
    
	</table>
	</div>	
  </body>
</html>

源:http://younglibin.iteye.com/

asir007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定（冻结）table第一行的列名

&lt;script type="text/javascript"&gt; function fixupFirstRow(tab) { var div = tab.parentNode; if(div.className.toLowerCase() == "freezediv"){ tab.rows[...
复制链接

扫一扫