Table冻结表头

标签： table 表头 | 发表时间：2013-08-20 17:32 | 作者：zyuc_wangxw
出处：http://blog.csdn.net

Table冻结表头：

<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>


html源码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<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:100px;overflow:auto;">
			<table id="freezedivTable" style="width:100%;" border="1">
				<tr bgcolor="white">
					<th width="25%">序号</th>
					<th width="25%">内容</th>
					<th width="25%">序号</th>
					<th width="25%">内容</th>
				</tr>
				<tr>
					<td>1</td>
					<td>内容</td>
					<td>11</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>2</td>
					<td>内容</td>
					<td>22</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>3</td>
					<td>内容</td>
					<td>33</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>4</td>
					<td>内容</td>
					<td>44</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>5</td>
					<td>内容</td>
					<td>55</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>6</td>
					<td>内容</td>
					<td>66</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>7</td>
					<td>内容</td>
					<td>77</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>8</td>
					<td>内容</td>
					<td>88</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>9</td>
					<td>内容</td>
					<td>99</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>10</td>
					<td>内容</td>
					<td>1010</td>
					<td>内容</td>
				</tr>
			</table>
		</div>
	</body>
</html>


 


 

作者：zyuc_wangxw 发表于2013-8-20 17:32:14 原文链接
阅读：36 评论：0 查看评论

相关 [table 表头] 推荐：

Table冻结表头

- - CSDN博客Web前端推荐文章
序号. 内容. 序号. 内容. 作者：zyuc_wangxw 发表于2013-8-20 17:32:14 原文链接. 阅读：36 评论：0 查看评论.

花瓶茶几：Flo Table

- 阳阳 - 爱…稀奇~{新鲜:科技:创意:有趣}
没看过花瓶茶几（Flo Table），你就不知道粗腿原来也能如此优雅：把茶几的一条腿变成了玻璃花瓶，木材的实成与透明玻璃的轻盈，就如此完美地结合在了一起~于是，尽管随手插点桃红柳绿在花瓶中吧，任何一点属于自然的色彩，都能将这个家点缀得充满生气~. 亲爱的，这些东西也会对你胃口：. Felt Stool Bookshelf Table：凳子、书架和茶几.

MySQL Temporary Table相关问题的探究

- comain - 淘宝核心系统团队博客
让我们先来观察几条非常简单的MySQL语句：. 这是丁奇提出的引导性的问题，几条语句看似简单，不过接下来我们提出的一连串问题与进. 看到以上语句，你很容易会产生类似于以下的疑问：. 上述语句在一个session中先后创建了两个名为’tmp’的table，只不过一个是temporary. table，一个是normal table.

MySQL 對 MyISAM、InnoDB 使用 Optimize Table

- - Tsung's Blog
系統用久了, 自然就會有不連續的碎片(fragmented)產生, 以前 Dos 使用 defrag, Windows 使用磁碟重組, 而 MySQL 則是使用 Optimize table.. 以往都是使用: 使用 PHP 對所有 MySQL Database 做 Optimize / Repair 的動作 - 這裡面的那隻程式來跑..

【分享】jQuery 表格Table插件汇总

- - HTML5研究小组
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等. Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧.

[翻译]最简单的无锁hash table

- - 博客园_首页
原文链接: http://preshing.com/20130605/the-worlds-simplest-lock-free-hash-table. 无锁hash table可以提高多线程下的性能表现，但是因为实现一个无锁hash table本身的复杂度不小(ps：真正的复杂在于出错之后的调试，因为多线程下的调试本身就很复杂，引入无锁数据结构之后，传统的看堆栈信息和打印log都基本上没有意义了(堆栈中的数据可能被并发访问破坏，而打印log本身可能会改变程序执行时对数据访问的时序).

抓取 MySQL Table 的 auto_increment 最大值

- - Tsung's Blog
MySQL 使用 InnoDB 要做 SELECT COUNT(*) 會非常慢, 若是此 Table 符合下述狀況. 很少刪除 (或知道大概會刪多少資料). 有設定 auto_increment. 就可以考慮直接抓取 auto_increment 的值來當參考.. 抓取 MySQL Table auto_increment 的最大值.

mysql的table is read only 解决方法

- - CSDN博客系统运维推荐文章
今天，在centos6下把mysql没法启动的数据库文件夹复制到/usr/local/mysql/var下，结果在修改表时，提示”table isreadonly”的错误. 首先想到的是遇到了权限问题，所以就去/usr/local/mysql/var查看了下，果然所有者不是mysql，权限也不正确.

MySQL 快速複製 Table 的方法

- - Tsung's Blog
MySQL 要複製 整個 Table, 要怎麼做呢?. MySQL 快速複製 Table 的方法. 以下範例都是把 old_table 複製到 new_table.. 先講講結論, 最推薦的作法是下述兩行:. 以下來講講幾種作法 和 優缺點.. MyISAM 的作法若比較暴力點的話, 可以用下述方式做:.

Table被web编程弃用的原因

- - WebHek
Table要比其它html标记占更多的字节. (延迟下载时间，占用服务器更多的流量资源. Tablle会阻挡浏览器渲染引擎的渲染顺序. (会延迟页面的生成速度，让用户等待更久的时间. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图. (增加设计的复杂度，增加页面加载时间，增加HTTP会话数.