<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 945为了最好的视觉效果，可以进行兼容模式设置，如不设置也可正 ... -
google地图图标
2011-01-17 17:09 20991.在指定位置指定 ... -
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 1093开发环境：VS2008 在.NET中说到验证XML，估 ... -
内部排序算法
2010-04-28 07:57 702几种内部排序算法总结!(冒泡排序、快速排序、直接插入排序、 ... -
tree
2009-01-20 09:51 615tree -
iframe 父子窗体调用
2008-11-20 16:03 1521iframe 父窗口和子窗口的调用方法 Posted on ... -
DHtml
2008-09-26 10:21 607dhtml -
group box
2008-07-02 13:18 1160关于Silverlight Silverlight 是一个跨浏 ... -
vml 饼图
2008-07-01 16:59 1777<html xmlns:v="urn:sche ... -
vml 折线图
2008-07-01 16:57 2008<HTML xmlns:v="urn:sche ... -
vml资料
2008-06-18 16:45 1987http://hi.baidu.com/greatmast ... -
前台图片效果
2008-06-18 14:29 1344<SPAN class="bold" ... -
锚点是什么？
2008-05-05 15:10 14881：锚点是什么？锚点也可以理解成为一种超级链接，只不过它是网页 ... -
webchart作图
2008-05-05 12:57 2211<%@ Import Namespace="S ... -
vml圆角，箭头（IE）
2008-05-05 12:51 2758<HTML xmlns:v> <HEAD& ...
相关推荐
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
为了实现行列固定，我们需要对这些元素进行特殊的CSS样式处理。 固定表头（Fixed Header）通常是通过CSS `position` 属性实现的。设置 `position: absolute;` 或 `position: fixed;` 可以使元素脱离正常文档流，...
"CSS+TABLE固定行列表"就是这种技术的应用，它利用CSS样式来实现表格的行列固定。 首先，我们来看一下如何实现固定的表头。在HTML中，可以将表头放在`<thead>`标签内，然后通过CSS设置`position: fixed`属性。例如...
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
要实现`table表格固定行和列`，我们可以采用以下几种方法： 1. **CSS样式实现** 通过CSS定位技术，我们可以将表头（thead）和第一列（th）设置为固定位置。例如，使用`position: fixed`可以将元素从正常文档流中...
固定表头通常是通过CSS定位技术来实现的。我们可以创建一个包含表头的新`<div>`，并将其设置为绝对定位，使其始终在页面顶部显示。同时，我们需要确保表头的高度与实际表格的第一行高度一致，以保持视觉一致性。例如...
本教程将详细介绍如何利用HTML、CSS以及JavaScript实现一个具有固定行列效果的表格特效，使用户在滚动时仍能看到关键的列名和行标识。 首先，我们需要创建一个基本的HTML结构，包含一个表格元素（`<table>`）。表格...
在网页设计和开发中，"table的行列冻结"是一个常见的需求，特别是在处理大量数据时，为了提高用户体验，用户可能希望某些列或行始终保持可见，即使他们滚动页面。这个功能允许用户查看表格的上下文信息，而无需手动...
本篇文章将详细讲解如何利用jQuery实现表格（table）的行列锁定功能，这对于创建数据量较大但需要保持关键信息可视化的网页界面至关重要。 首先，锁定表格的行或列可以让用户在滚动页面时始终保持某些重要的头部...
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
### Table锁定行列的相关知识点 #### 一、行列锁定的常用方法 在开发过程中，当涉及到大量数据展示时，经常会用到表格（Table）这一展示形式。然而，在数据量较大时，表格可能会出现需要滚动才能查看完整内容的...
首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也会始终保持可见，以便用户始终能看到关键信息。例如，表头通常会被冻结，以便用户在查看大量数据时能快速识别列内容。 在给定的...
`固定行列.html`是HTML文件，其中包含了表格结构。这个文件可能会包含一个`<table>`元素，以及使用`<thead>`、`<tbody>`和`<tfoot>`组织的表格部分。为了实现固定行和列，表格可能需要特殊的类名或ID，以便在...
在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在数据量较大或者需要行列对齐的情况下。然而，当表格内容过多导致需要滚动查看时，表头（thead）的固定问题就显得尤为重要。"固定table的thead表头"这...
在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...
为了解决这个问题，"兼容浏览器的table行列锁定"技术应运而生。这种技术允许用户在滚动表格时，保持特定的行或列始终可见，提高用户的浏览体验。 首先，我们需要理解“行列锁定”的概念。行锁定（Row Locking）指的...
为了解决这一问题，我们可以利用jQuery库来实现表格的固定行列功能，让表头始终保持可见，即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先，确保在项目中引入jQuery库，可以使用CDN链接...
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
在网页设计中，固定表格的行列是一个常见的需求，特别是在处理大量数据时，为了提供更好的用户体验，需要让表头在滚动时始终保持可见。本教程将详细讲解如何使用HTML、JavaScript（JS）和CSS来实现这一功能。 首先...
标题"“Ligerui Table导出excel 支持样式、冻结行列、图片等导出”"指出了LigerUI Table导出Excel功能的三个主要特色： 1. **原样式导出**：此功能意味着LigerUI Table在导出数据时，会尽可能地保留表格在网页上...