关键词：
当表格数据很多，以致于容器块元素出现滚动条。而在滚动滚动条的时候，数据行会被块元素遮挡。若要保持表格的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>
自定义table固定列和表头
...table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表头只固定前四列和时段流量列，时间列是不固定的），第二个table（table2）是所有的数据，把table1定位在table2的上面。二、效果图三、 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
固定table的表头同时固定列
...显示一种形式，但有时候数据比较多的时候就需要我们去固定表头，固定列。我这里用简单的css样式配合两句js脚本来实现，希望能够去帮到你。<divclass="tableContainer"><divclass="sideTable"><span>产品小类</span><divid="... 查看详情
table表头固定（原创）
...个简单的插件，无论table多大，位置在哪，都可以使thead固定在table上方；使用的原理是clone一个thead出来，再使用定位，使克隆的元素定位在table上方。1<!DOCTYPEhtml>2<html>3<hea 查看详情
html固定table表头的实现思路
...态调整克隆table的左偏移，上偏移不需要调整，因为已经固定了。效果演示<html><head>< 查看详情
table固定表头固定列实现横向纵向滚动
...只有tbody，分别把两个table用div包裹起来，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position:sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。因为table里thead和tbody本... 查看详情
表格在固定表头遇到样式问题
css样式来固定表头，首先设置两个table，这个时候就遇到了一个问题，那就是两个表格td的宽度要保持对其。这样才能做到固定表头的效果。首先给table设置一个固定宽度。然后添加样式table{table-layed:fixed}有可能还会遇到其他的问... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"c... 查看详情
saiku如何固定查询结果table的表头和首列
...维度不清楚，得来回拖动滚动条才行，所以同事提出想要固定“表头”和“首列”。在网上找了一些现成的插件使用后效果都不理想，所以决定自己动手，丰衣足食。我的思路来自：http://www.cnblogs.com 查看详情
如何固定table的表头
...最简单的可以写两个table。表头一个table，表身外层一个固定高度div，里层一个table，使表头和表身的每一列的宽度对应就好了。例：<table><tr><thwidth="20%">xxx</th><thwidth="40%">xxx</th><th>xxx... 查看详情
table表头固定thead固定.1)使用jquery.freezeheader.js
方法一:使用jquery.freezeheader.js固定表头: 1-:初始化:1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>表格table固定thead表头</title>6<styletype="text 查看详情
table表头固定
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>固定表格表头</title><metahttp-equiv="X-UA-Compatible"conten 查看详情
html中怎么固定一个table的表头和表位，拖动滚动条中间的数据滚动，而表头和表尾固定呢？表尾是用来做合计
...要的效果是一体的，而不是分成3个table来做，网上有很多固定表头和列的例子，但是没有固定表尾的，希望哪个大哥大姐能帮忙解决。给你写个固定表头的例子，固定表尾的就当是课堂练习，希望你能举一反三：<HTML><HEAD&... 查看详情
小程序table表头固定，左右滑动
效果一：wxml<!--<viewclass='table'>左侧固定<viewclass='table_left_column'><viewclass='left_col_item'>排班</view><viewclass='left_col_item'style=&quo 查看详情
table中head表头固定，body滚动
1<styletype="text/css">2.table-head{3background-color:#999;4color:#000;5}6.table-body{7width:100%;8height:300px;9overflow-y:scroll;10}11.table-headtable,12.table-bodytable{13width:100%;14}15tabl 查看详情
table实现表头固定内容滚动
<divstyle="width:800px;"><divclass="table-head"><table><colgroup><colstyle="width:80px;"/><col/></colgroup><thead><tr><th>序号</th><t 查看详情
css写一个表头如何固定
...最简单的可以写两个table。表头一个table，表身外层一个固定高度div，里层一个table，使表头和表身的每一列的宽度对应就好了。例：<table><tr><thwidth="20%">xxx</th><thwidth="40%">xxx</th><th>xxx... 查看详情