当表格数据很多，以致于容器块元素出现滚动条。而在滚动滚动条的时候，数据行会被块元素遮挡。若要保持表格的head部分始终在可视范围内，我们需要对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定，经过测试可以直接使用。在IE浏览器下，拉动滚动条时表头会抖动，在谷歌下确实很流程，估计是浏览器的兼容性问题。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>固定表头</title>

</head>

<style>

	#box{

		height:214px;

		width:500px;

		overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */

		position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */

	}

	table,tr,td,th{

		border:1px solid #ccd;

		border-collapse:collapse;

	}

	table{

		width:100%;

	}

	td{

		height:24px;

		width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */

		line-height:24px;

		padding:3px 5px;

		background-color:#ddd;

		word-break:break-all;/** 设置当文本过长时换行 */

	}

	th{

		height:24px;

		width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */

		line-height:24px;

		background-color:#cfc;

	}

</style>

<SCRIPT LANGUAGE="JavaScript">

<!--

/**

 * 功能：固定表头（核心方法）

 * 参数   viewid     表格的id

 *       scrollid   滚动条所在容器的id

 *       size       表头的行数（复杂表头可能不止一行）

 */

function scroll(viewid,scrollid,size){

    	// 获取滚动条容器

	var scroll = document.getElementById(scrollid);

        // 将表格拷贝一份

	var tb2 = document.getElementById(viewid).cloneNode(true);

        // 获取表格的行数

	var len = tb2.rows.length;

        // 将拷贝得到的表格中非表头行删除

	for(var i=tb2.rows.length;i>size;i--){

		// 每次删除数据行的第一行

                tb2.deleteRow(size);

	}

        // 创建一个div

	var bak = document.createElement("div");

        // 将div添加到滚动条容器中

	scroll.appendChild(bak);

        // 将拷贝得到的表格在删除数据行后添加到创建的div中

	bak.appendChild(tb2);

        // 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）

	bak.style.position = "absolute";

        // 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）

	bak.style.backgroundColor = "#cfc";

        // 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）

	bak.style.display = "block";

        // 设置创建的div的left属性为0，即该div与滚动条容器紧贴

	bak.style.left = 0;

        // 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头

	bak.style.top = "0px";

        // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端

	scroll.onscroll = function(){

                // 设置div的top值为滚动条距离滚动条容器顶部的距离值

		bak.style.top = this.scrollTop+"px";

	}

}

// 在页面加载完成后调用该方法

window.onload = function (){

	scroll("tab","box",1);

}

//-->

</SCRIPT>

<body>

	<div id="box">

		<table id="tab">

			<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>

			<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>

			<tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>

			<tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>

			<tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>

			<tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>

			<tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>

			<tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>

			<tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>

			<tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>

			<tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>

			<tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>

			<tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>

			<tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>

			<tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>

			<tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>

			<tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>

			<tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>

			<tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>

			<tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>

			<tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>

			<tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>

			<tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>

			<tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>

			<tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>

		</table>

	</div>

</body>

</html>

　　

JavaScript：固定table的表头的更多相关文章

  1. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  2. 固定table的表头同时固定列

    table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...

  3. bootstrap中固定table的表头

    前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...

  4. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  5. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

  6. Javascript 固定表格表头

    遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...

  7. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  8. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

随机推荐

  1. linq to sql之Distinct

    Distict用来排除相同序列中元素的,对于基础类型,可以直接使用Distinct,如:int[] a = {1, 2, 2, 3, 3, 3, 4};var reslut = a.Distinct( ...

  2. React高阶组件学习笔记

    高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...

  3. SVN客户端（TortoiseSVN）保存密码自动登录后，如何切换使用其它帐户登录方法

    清除SVN客户端(TortoiseSVN)保存的认证信息(用户名和密码) 1.选择TortoiseSVN---->Settings. 2.点"Clear” ,清空Authenticat ...

  4. O048、掌握 cinder-scheduler 调度逻辑

    参考https://www.cnblogs.com/CloudMan6/p/5589707.html   上一节我们详细讨论了cinder-api 和 cinder-volume ,今天讨论另一个重要 ...

  5. Const指针 、 指向const的指针 、引用、指针

    1. const指针和 指向const的指针 指向const的指针: 不允许通过指针来改变其指向的const值 const double *cptr *cptr = 42;  // error! 指针 ...

  6. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  7. vue入门：（事件处理）

    基本应用 修饰符 为什么要在HTML中使用事件监听 Demo 一.基本应用 1.通过v-on指令绑定事件,例如: <button v-on:click="">提交< ...

  8. 通俗易懂的axios

    get的两种请求: methods:{ //axios.get的发送参数有两种,两个ajax请求函数都可实现 sendGetByStr(){ //1.get通过直接发字符串拼接 axios.get(` ...

  9. Delphi 卡通控件

    樊伟胜

  10. redis整合Spring入门

    首先 衷心感谢这篇博客给我入门时的启发  三颗心脏 你需要知道,spring的官方文档中已经注明,与redis整合时,spring的jar包版本不能低于4.2.6,否则不支持,会报错的哟 测试的时候请 ...