<html>
<head>
<style type="text/css">
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop-2);
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-2);
background-color: #E6ECF0;
}
</style>
</head>
<body>
<div id = "scrolDiv" style="width: 60%; overflow: auto; cursor: default; display: inline; position: absolute; height: 20%;">
<table id = "DataTable" cellpadding='0' cellspacing='0' style="table-layout: auto" bordercolor="lightgrey" border = "1" width="120%" height="30%">
<tr class = "FixedTitleRow">
<td colspan = "6" align = "center">
商??行??
</td>
</tr>
<tr class = "FixedTitleRow">
<td class = "FixedTitleColumn" align = "center" width = "15%">
商?企?
</td>
<td align = "center" width = "10%">
到?量
</td>
<td align = "center" width = "10%">
分?打?量
</td>
<td align = "center" width = "10%">
零售?退?量
</td>
<td align = "center" width = "10%">
商商??量
</td>
<td align = "center" width = "10%">
?存量
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
发表评论
-
兼容模式设置
2011-09-13 09:28 928为了最好的视觉效果，可以进行兼容模式设置，如不设置也可正 ... -
google地图图标
2011-01-17 17:09 20641.在指定位置指定 ... -
iefav
2010-09-17 10:14 0反对伐发放 -
fsda
2010-09-16 16:20 0fadfa -
book
2010-09-16 16:16 0rwe -
SQLdll
2010-09-16 16:13 0gsf -
xml验证 转载
2010-05-14 10:04 1067开发环境：VS2008 在.NET中说到验证XML，估 ... -
内部排序算法
2010-04-28 07:57 677几种内部排序算法总结!(冒泡排序、快速排序、直接插入排序、 ... -
tree
2009-01-20 09:51 594tree -
iframe 父子窗体调用
2008-11-20 16:03 1500iframe 父窗口和子窗口的调用方法 Posted on ... -
DHtml
2008-09-26 10:21 587dhtml -
group box
2008-07-02 13:18 1139关于Silverlight Silverlight 是一个跨浏 ... -
vml 饼图
2008-07-01 16:59 1757<html xmlns:v="urn:sche ... -
vml 折线图
2008-07-01 16:57 1982<HTML xmlns:v="urn:sche ... -
vml资料
2008-06-18 16:45 1964http://hi.baidu.com/greatmast ... -
前台图片效果
2008-06-18 14:29 1317<SPAN class="bold" ... -
锚点是什么？
2008-05-05 15:10 14631：锚点是什么？锚点也可以理解成为一种超级链接，只不过它是网页 ... -
webchart作图
2008-05-05 12:57 2193<%@ Import Namespace="S ... -
vml圆角，箭头（IE）
2008-05-05 12:51 2733<HTML xmlns:v> <HEAD& ...
相关推荐
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
CSS+TABLE固定行列表,通过样式来控制Table的行、列固定。
前端页面定制固定指定行、指定列固定的table，进行垂直滚动以及横向滚动操作！
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
table的行列冻结
可实现table固定行首和列首，div+css+js
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
如何使用jquery固定表格行列，固定table表头。
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
固定表头table,实现table固定行列
前几天有人问我,在Web开发当中,固定表格 的行和列,怎么做比较简单一点,我在这这里做了几个Demo,适用于table，当然也适用于各种表格控件。希望大家有时间看一下。Css学好是很重要的
用js+css控制表格行列固定，下列浏览器可用 Firefox 2+ Internet Explorer 5.5+ Safari 3+ Opera 9 Chrome
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
Ligerui Table 导出excel表格 （基于jquery） 1.支持原样式导出 2.支持带图片导出 3.支持固定行固定列导出
horizontal_data_table Flutter Widget，用于创建水平表，左侧固定列。安装该程序包开始支持声音为零的安全性。 尽管该软件包是手动迁移的，并已通过每个功能进行了测试，但如果集成/迁移存在任何问题，请随时在...
JQuery固定表头 及左侧列
修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性...
如果列号是0且只有1列则取table的首行列信息（针对列数不固定的table） 列宽－指定其宽度，以Excel的实际宽度取值； 居中－留空则为居中，n为不居中（左对齐）； 文本型数值－留空为不设置，t为设置单元格为文本...