<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style>
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
</style>
</head>
<body>
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 200px;">
<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
style='table-layout: auto' bordercolor='lightgrey'>
<tbody>
<tr class="FixedTitleRow">
<td class="FixedTitleColumn">
ID0</td>
<td class="FixedTitleColumn">
CK0</td>
<td class="FixedTitleColumn">
Code0</td>
<td class="FixedTitleColumn">
Descirption0</td>
<td class="FixedTitleColumn">
TOL0</td>
<td>
XS0</td>
<td >
SS0</td>
<td>
MS0</td>
<td>
DS0</td>
<td>
BS0</td>
<td>
XL0</td>
<td>
ML0</td>
<td>
DL0</td>
<td>
EM0</td>
<td>
BM0</td>
</tr>
<tr>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
功能特色： 1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序；...6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置
修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的...
固定GridView表头,使用JS方法以及样式在前台控制表头
此方法的思路其实很简单，就是将表头放在一个表格中，将表单内容repeater放在一个DIV中 ，再将DIV的样式高度设为定值，并将此div设置为允许出现纵向滚动条。这种方法可以解决锁表头的功能，但是这里的缺点就是要将...
主要介绍了JS实现的表头列头固定页面功能,涉及javascript针对页面元素及表格样式动态操作相关技巧,需要的朋友可以参考下
Excel导出 实现自定义表头 实现锁定首行 实现合并单元格 实现设置字体 实现显示单元格边框 实现使用样式
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能...
项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 多浏览器没有做...
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css">... //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法，但效果都不太理想，最后还是老老实实调样式，发现我们所看到的表头就是”....
消息v2.0发布，详见安装npm install ali-react-table 特色高级，内置虚拟滚动，数据量接合时自动开启简单灵活的API，丰富的定制能力实用的表格特性：表头吸顶＆左侧/右侧锁列＆粘性定位的滚动条表格适用场景需要用...
PickerUpload上传进度以及上传之后查看删除都没有在页面体现，你可以通过控制台查看上传进度Table该demo实现固定表头和固定列（只固定在左侧）的效果Cascader级联选择器Transfer音乐播放器音乐播放博客文章实现效果...
5、固定表头、指定行或指定列 设置其FixRowCol下的6个属性 IsFixHeader - 固定表头否？ IsFixPager - 固定分页行否？ FixRowIndices - 需要固定的行的索引（用逗号“,”分隔） FixColumnIndices - 需要固定的列...
实现了gridview的增删改,分页,排序,各种样式,绑定图片,导入和导出,固定表头,表头合并,平均值和求和,隐藏列,编号等各种功能.内涵数据库.
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 这里只实现基于ligerUI的分页 LigerUI的分页方式有两种：local和server。 如果...
通过查询系统表得到纵向的表结构 将数据库表中的数据生成Insert脚本的存储过程!!! 2分法-通用存储过程分页(top max模式)版本(性能相对之前的not in版本极大提高) 分页存储过程：排序反转分页法 优化后的通用分页存储...
9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态...