转自:http://blog.csdn.net/qq378527566/article/details/7786126
效果图如下:
初始化的画面:
拉动滚动条:
- <!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 container = 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添加到滚动条容器中
- container.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";
- bak.style.width = "100%";
- // 给滚动条容器绑定滚动条滚动事件,在滚动条滚动事件发生时,调整拷贝得来的表头的top值,保持其在可视范围内,且在滚动条容器的顶端
- container.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>