- 浏览: 406630 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (267)
- 序列号 (1)
- jquery (14)
- Eclipse插件 (3)
- Flex (2)
- Rose (1)
- Myeclipse (3)
- maven (4)
- SpringSecurity (2)
- sproutcore (1)
- Http (2)
- svn (4)
- gwt (3)
- jetty (1)
- freebsd (1)
- java (29)
- Oracle (21)
- windows (1)
- Mybatis3.0 (3)
- Struts2 (6)
- easyui (1)
- JPA (1)
- UML (1)
- dom4j (1)
- design pattern (2)
- JavaScript (8)
- FreeMarker (2)
- SQLServer (1)
- memcached (3)
- urlrewrite (1)
- MonggoDB (1)
- Solr (1)
- Lucene (1)
- SQL (2)
- JODConverter (1)
- xml (2)
- pdf2swf (1)
- flexpaper (1)
- android (2)
- jsp (5)
- mobile (1)
- weblogic (3)
- Tomcat (8)
- xss (1)
- db2 (2)
- webservice (1)
- spring (2)
- Gradle (1)
- linux (4)
- ldap (1)
- 软件工程 (1)
- 开发模型 (1)
- linux系统硬件配置查看方法 (1)
- cas (3)
- mysql (1)
- HAProxy (0)
- html (1)
- Web前端 (1)
最新评论
-
super_zou:
...
世界主要国家地区下拉菜单三级联动1 -
ldl_xz:
http://www.9958.pw/post/wenku 曾 ...
利用pdf2swf将PDF转换成SWF -
superlxw1234:
请教一下楼主,你们是如何解决使用MAgent时候,一台主Mem ...
memcached集群-magent -
头子:
中间那段关于“空隙”的解决方式很赞
HTML固定表头Table -
qiankun:
比较实用,好好学习了一下
Mybatis 在dao中获取分页的总记录数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<style>
table{border:1px solid #00ccdf;}
#text{position:fixed;background-color:#00ff00 ;}
*+html #text {background-color:red;position:relative;top:expression(this.offsetParent.scrollTop);}
</style>
<body>
<div style="height: 250px; overflow: auto;padding:-8px;">
<table border=0 cellpadding="0" cellspacing="0">
<tr id="text">
<th>
head </th>
</tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>dddd</td>
</tr>
</table>
</div>
</body>
</html>
如果有一些空隙 使用padding 调节。在IE中也可以 top:expression(this.offsetParent.scrollTop-2)这样调节。
转,只能IE
<head><title></title></head>
<style>
.ListTableF {
border:1px solid #8EC2E6;
border-collapse:collapse;
BORDER-BOTTOM: medium none;
BORDER-LEFT: medium none;
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
margin-top:-1px;
margin-left:-1px;
margin-right:-1px;
}
.fixedDiv{
overflow:auto;
height:expression(document.body.clientHeight-240);
width:expression(800);
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid ;
overflow-x:scroll;
}
.fixedHeaderTr {
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:20;
}
.fixedHeaderTd {
position:relative;
left:expression(this.offsetParent.scrollLeft);
z-index:10;
}
.TableRow {
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
}
.TableRow1 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:10;
}
.TableRow2 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:30;
}
.RecordRow {
border: inset 1px #94B6E6;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
font-size: 12px;
border-collapse:collapse;
height:22;
}
</style>
<body>
<div class="fixedDiv">
<table width="1000" border="0" cellspacing="0" align="center" cellpadding="0"
<tr class="fixedHeaderTr">
<td align="center" width="125" class="TableRow2">第一列</td>
<td align="center" width="125" class="TableRow">第二列</td>
<td align="center" width="125" class="TableRow">第三列</td>
<td align="center" width="125" class="TableRow">第四列</td>
<td align="center" width="125" class="TableRow">第五列</td>
<td align="center" width="125" class="TableRow">第六列</td>
<td align="center" width="125" class="TableRow">第七列</td>
<td align="center" width="125" class="TableRow">第八列</td>
</tr>
<tr>
<td align="center" class="TableRow1">第一行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第五行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第六行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第七行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第八行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第九行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十一行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十五行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十六行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十七行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十八行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第十九行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十一行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十二行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十三行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
<tr>
<td align="center" class="TableRow1">第二十四行</td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
<td align="center" class="RecordRow"> </td>
</tr>
</table>
</body>
</html>
相关推荐
主要介绍了html Table 表头固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
html table 固定表头和列,下载后,运行index.html页面即可看到效果。
固定表头table,实现table固定行列
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
table的表头固定,用的是一个TABLE
固定table表头的插件.zip
html+ table 固定表头和左侧列,可以直接套用在asp.net中,非常方便好用。
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器,亲测(IE6,IE6+,firefox,chrome,opera)
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
Table 表头固定,当下拉条滚动时,表头一直停留在页面顶部固定不动
复杂表头固定行,固定列,纯css实现,样式可修改,可根据自己要求,更改表头,以及固定列的数量,本人亲测,确实好用
NULL 博文链接:https://ado88.iteye.com/blog/437305
vue移动端项目 一个可以固定表头首列的表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助
Javascript脚本实现HTML页面中表格Table的标题行固定位置,并与表格内容对齐。
锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听(当触发 window.onresize时自动重新固定表头) 增加左边固定位置鼠标滚轮事件
当表格数据较多时,会导致表头随内容滚动,影响使用,因此使用jQuery做一个插件,压缩文件中有test.html是一个具体使用的案例,如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
html 固定表头 (上下,左右,缩放均支持,代码简单)
1. 实现表格的列排序功能(点击表头,切换该列升降序),也可以指定哪一列不排序; 2. 实现当前排序列高亮显示; 3. 实现表格奇偶行不同颜色,即换行变色; 4. 实现表格分页功能,可指定是否开启分页功能及每页行数...
固定table的thead表头