表头固定

原创 2004年10月28日 09:07:00

<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<style>
body {
    background-color: #F0F0F0 ;
    font: 11px "verdana","Arial";
    width:90%;
    margin-left:auto;
    margin-right:auto;   
    }

.tScroll {
    border: 1px #7494BF solid;
    background-color: #ffffff;
      overflow: scroll;
    overflow-x:hidden;
    height:100px;
    cursor: default;
    }

tr.tableHead {
    position:relative;
    background-color:#BFCEE7;
    height: 16px;
    text-align: center;
    }

td { 
    font: 11px "Verdana", "Arial";
    }

td.asBtn{   
    border: #7494BF solid;
    border-width: 0px 1px 1px 0px;
    }

table {
    border:0px;
    width:100%;
    }
</style>
</head>
<body>
<div class="tScroll" id="tC">
<table cellspacing="0" cellpadding="0">
<tr class="tableHead" onselectstart="return false"style="top:expression(document.getElementById('tC').scrollTop)">
<td class="asBtn">heading1</td>
<td class="asBtn">heading2</td><td class="asBtn">heading3</td>
<td class="asBtn">heading4</td><td class="asBtn">heading5</td>
<td class="asBtn">heading6</td>
</tr>
<tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
</body>
</html>

table表头和首列的表格固定-CSS实现的Table表头固定

效果就是上图 表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动 下面是代码原文是查看 ...
  • q3585914
  • q3585914
  • 2017年04月10日 14:06
  • 11206

基于jquery的表头固定的若干方法

如果Table数据过多,页面必然会拉的很长,固定表头,可以方便用户对照表头项目列表。近日做后台界面时,整理固定表头三种方法 A:使用JQuery UI插件,用DIV替换table,overflow-...
  • a9529lty
  • a9529lty
  • 2011年11月11日 08:27
  • 13251

table表头和首列的表格固定-JQuery、js实现的Table表头固定

这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, ...
  • q3585914
  • q3585914
  • 2017年04月10日 13:53
  • 9073

bootstrap Table表头固定

简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表...
  • youshouyiqi
  • youshouyiqi
  • 2017年02月25日 11:47
  • 9731

ASP.Net下为GridView创建固定表头

1.问题描述: 由于gridviewlimi
  • liuyunhuanying
  • liuyunhuanying
  • 2014年09月03日 10:46
  • 1494

table中head表头固定,body滚动

table中head表头固定,body滚动
  • hualele
  • hualele
  • 2016年11月01日 10:15
  • 18073

CSS固定表格表头

固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px...
  • longvs
  • longvs
  • 2013年10月30日 17:22
  • 4065

js 实现 table 固定表头

固定表头           #box{           height:214px;           width:500px;           overflow-y:aut...
  • zhu_nana
  • zhu_nana
  • 2016年02月15日 15:07
  • 4345

CSS实现固定表头 HTML表格

html>head>title>title>link rel="stylesheet" href="demo.css" type="text/css">head>body>p>这段空间的高度会自动计算...
  • sunyujia
  • sunyujia
  • 2008年02月14日 20:51
  • 2533

bootstrap的table表头固定tbody滚动

栏目一 栏目二 栏目三 栏目一 栏目二 栏目三 星期一 星期二 星期三 星...
  • bbsyi
  • bbsyi
  • 2016年04月11日 21:47
  • 21592
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表头固定
举报原因:
原因补充:

(最多只允许输入30个字)