在网上找到的一段固定表格中表头和列的代码
<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: 400px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 200px;">
<table id='accountTable' width='550' height='230' cellpadding='0' cellspacing='0' border='1'
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>
<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>
分享到：
相关推荐
Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
总的来说，"h5 固定表头及列头demo"是一个实用的示例，它结合了H5、CSS和JavaScript的技术，以实现对长表格的优化显示。通过学习和理解这个示例，开发者能够提升在网页开发中的用户体验设计能力，特别是在处理数据...
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
div+css 固定表头和列div+css 固定表头和列
它提供了丰富的功能，如排序、分页、筛选等，而“固定表头和列”则是提高用户体验的一个重要特性。在用户滚动页面时，保持表头和部分列始终可见，能够帮助用户更好地理解和跟踪数据。 实现GridView固定表头和列，...
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格，并确保全浏览器兼容。 首先，jQuery 是一个强大的 JavaScript 库，它简化了 DOM 操作、事件处理、动画和Ajax交互。在...
在这个特定的案例中，我们关注的是如何在JasperReport和iReport中实现固定表头以及隐藏和显示列的功能。 首先，让我们了解一下JasperReport。JasperReport是一个开源的报表库，它允许开发者在各种应用程序中生成...
2. 使用CSS定义表格样式，包括固定表头和列的样式。 3. 如果需要，可以使用JavaScript进行增强，比如在滚动时动态调整固定元素的位置。 4. 在JSP中处理数据，生成对应的表格行。 5. 结合Bootstrap、jQuery或者其他...
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
本实例主要关注如何实现GridView的固定表头和列，使得用户在滚动浏览长表格时，表头和部分列始终保持可见，提高用户体验。 GridView冻结表头和列的需求在大数据量展示时尤为重要，因为表头的可见性有助于用户在浏览...
JQuery固定表头 及左侧列
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
总结来说，"jquery表头固定、列固定完美解决方案"是通过jQuery库和自定义JavaScript插件实现的一种优化用户体验的方法，特别是在处理大量数据的表格时。它提供了表头和列的固定功能，使用户在浏览长表格时能更方便地...
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数...
在处理大型数据表格时，为了提高用户体验，我们常常需要实现固定表头和列的效果，这样用户在滚动页面时，表头和列标签始终保持可见，方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先，我们需要...
在优化性能方面，需要注意的是，固定表头和列可能会增加页面的渲染负担，特别是在移动设备上。因此，应合理使用，避免在不需要的情况下固定过多的元素，同时考虑利用CSS3的硬件加速特性（如`transform: translateZ(0...
总之，ireport通过其灵活的设计界面和强大的功能，使得开发人员能够创建出满足各种需求的报表，包括固定表头、隐藏列和列的固定等特性。熟练掌握这些技巧，将有助于提升报表的用户体验，使数据展示更加直观和高效。...
【固定列头表头ListScroll】是一种在Android开发中实现的高级UI组件，它结合了ListView和ScrollView的优点，主要用于展示大量数据并具有横向滚动和纵向滚动功能的表格。这种组件通常用于显示复杂的数据结构，例如...