<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>
分享到：
相关推荐
在实现固定表头和首列的表格时，我们将利用Vue的这两个特性来构建可复用的组件。 1. **数据绑定**：Vue中的数据绑定允许我们创建动态视图。在表格中，我们可以将数据存储在一个数组中，然后通过`v-for`指令遍历这个...
在解压并打开项目后，可以找到相关的ASPX页面（`.aspx`）、后台代码文件（`.cs`或`.vb`）和CSS样式表（`.css`），这些文件中会包含实现固定表头和列的具体代码和样式。 总之，GridView固定表头和列的实现涉及到前端...
在这个特定的案例中，我们关注的是如何在JasperReport和iReport中实现固定表头以及隐藏和显示列的功能。 首先，让我们了解一下JasperReport。JasperReport是一个开源的报表库，它允许开发者在各种应用程序中生成...
需要注意的是，实现固定表头和列的过程中，可能会遇到浏览器兼容性问题，尤其是对于较老的浏览器。因此，需要确保CSS和JavaScript代码经过充分测试，确保在主流浏览器上正常工作。 总的来说，实现Table表头和列固定...
通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 虽然`position: sticky;`在现代浏览器中得到了广泛支持，但老版本的IE浏览器并不支持。为了确保兼容性，可能需要使用...
分析这个文件可以更深入地理解实现固定表头和列头的具体步骤。 总的来说，"h5 固定表头及列头demo"是一个实用的示例，它结合了H5、CSS和JavaScript的技术，以实现对长表格的优化显示。通过学习和理解这个示例，...
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
在IT行业的前端开发中，使用CSS来固定表头或列是一项常见的需求，尤其是在处理大量数据时，这样的设计能显著提升用户体验。本文将深入探讨如何利用CSS实现这一功能，基于提供的HTML代码片段，我们将详细解析其背后的...
本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能，以提升用户体验，使得用户在滚动时能够始终保持表头和第一列可见。 首先，我们需要理解HTML5中的`<table>`元素，它是用于创建表格的标准标签。在...
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
总结来说，"jquery表头固定、列固定完美解决方案"是通过jQuery库和自定义JavaScript插件实现的一种优化用户体验的方法，特别是在处理大量数据的表格时。它提供了表头和列的固定功能，使用户在浏览长表格时能更方便地...
对于大屏幕，可以同时固定表头和一列或多列。可以通过媒体查询（Media Queries）实现响应式设计，或者提供用户切换不同固定模式的选项。 总的来说，实现“html 表头固定”和“列固定”能极大地提升用户在浏览大量...
本实例主要关注如何实现GridView的固定表头和列，使得用户在滚动浏览长表格时，表头和部分列始终保持可见，提高用户体验。 GridView冻结表头和列的需求在大数据量展示时尤为重要，因为表头的可见性有助于用户在浏览...
功能特色： 1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序；...6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置
这样，无论表格如何滚动，表头列和表格主体的列宽度都会保持一致。 接下来，我们看下如何通过CSS来定义固定表头的效果。首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景...
在处理大型数据表格时，为了提高用户体验，我们常常需要实现固定表头和列的效果，这样用户在滚动页面时，表头和列标签始终保持可见，方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先，我们需要...
总结来说，实现jQuery固定表头和列主要涉及HTML布局、CSS样式和jQuery的滚动事件监听。通过合理地组合这些技术，我们可以创建出用户友好的数据展示表格，即使在大量数据下也能保持清晰的结构。实际应用中，根据需求...
对于初学者，可以通过阅读和学习这些代码，了解如何结合`jQuery`和CSS来实现固定表头和表列。同时，为了提高性能和用户体验，还需要关注插件的优化，比如减少DOM操作，避免不必要的重绘和回流，以及合理利用缓存等...
在移动端开发中，数据展示是常见需求之一，而表格（table）...通过HTML5和CSS3，我们可以实现固定表头和第一列的效果，提高数据展示的可读性和交互性。这是一项关键的前端技术，对于提升移动端网页应用的质量至关重要。
使用时，只需将这些代码整合到你的页面结构中，调整样式以匹配你的界面设计，即可实现固定表头和左侧列的效果。 总的来说，固定表头和左侧列是提高数据展示可读性和用户体验的重要手段。在ASP.NET中，结合HTML、CSS...