问题描述: 当我们在页面列出的表格数据的行远远大于屏幕高度. 而滚动滚动条到数据底部时却看不到该列所对应的列标题
解决方法: JQUERY 插件
步骤:
1. 引用jquery-1.3.2.min.js , CloneTableHeader.js (两个JS请查看附件)
2. 编写JS:
$(function(){
jQuery.fn.CloneTableHeader("tab1", "div1"); //tab1表格ID,div1 : 表格外div的ID
});
3. 代码如下:
<div style=" height: 100px; overflow:scroll;" id="div1">
<table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">
<thead>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td>
编号
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
城市
</td>
</tr>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td colspan="2">身高</td>
<td colspan="2">体重</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>
1
</td>
<td>
张三1
</td>
<td>
22
</td>
<td>
北京
</td>
</tr>
<tr>
<td colspan="2">170</td>
<td colspan="2">99</td>
</tr>
</tbody>
</table>
</div>
4. 注意: 表格的列标题必须在THEAD之内, 否则没有效果.
分享到：
相关推荐
3. **固定表格列**：对于横向滚动的表格，固定列的实现稍微复杂些。通常需要创建一个新的容器，将需要固定的列复制到其中，并设置合适的宽度和位置。同样，jQuery可以用于检测表格的宽度和滚动位置，以更新这个新...
然而，当表格内容过多导致滚动时，表头（thead）与表体（tbody）滚动分离，使得用户在浏览时难以对应列标题，这在用户体验上是不理想的。为了解决这一问题，我们可以利用jQuery库来实现表格的固定行列功能，让表头...
标题"QT表格固定第一列，拖动时第一列不会遮挡"指向了一个特定的需求：在表格中固定第一列，以便用户在滚动或拖动表格时，关键的列头信息始终可见。这个功能对于处理大量数据或多个列的表格尤其有用，因为它可以提高...
它允许用户在滚动表格时，表格的头部（列标题）和左侧（行标题）能够固定不动，从而改善用户体验，尤其是当表格内容过多需要滚动浏览时。 首先，我们需要了解如何在HTML中创建一个基本的表格结构。一个简单的表格...
标题固定功能常用于网页滚动时保持表头可见，增强用户对数据列对应关系的理解。而固定列则是进一步优化用户体验的特性，使得某些重要的列在滚动时始终保持可见。本文将详细介绍如何在ASP.NET中实现GridView的固定...
2. **固定标题**：在处理大量数据时，滚动查看表格时可能会丢失顶部的列标题。为了解决这个问题，可以使用“冻结窗格”或“固定列”功能。在Excel中，选择要冻结的行（通常是最上面的一行，包含列标题），然后在...
本篇文章将详细探讨如何在Bootstrap中实现表格列合并，特别是按照每四列进行合并的技巧。 首先，理解Bootstrap表格的基本结构至关重要。一个Bootstrap表格由`<table>`标签开启，内部包含`<thead>`（表头）、`...
**锁标题行** 可以确保用户在滚动表格内容时始终能看到列标题。在Webix DataTable中，这通常与锁列一起实现，因为标题行会随锁定的列一起固定。只需确保设置`header`对象的`height`属性，使其高于数据行，以创建一个...
ASP.NET 表格/GRIDVIEW 固定标题列与栏位 这个是官网下载的，里面用的是表格，但是其他将表格替换为GRIDVIEW也是一样的，我的博客里面有说明。http://blog.csdn.net/luohai326/article/details/8993648 另外我下载了...
"安卓Recycleview固定行列标题仿Excel"的主题是利用RecycleView实现类似电子表格的功能，即在滚动时保持顶部行和左侧列标题固定，以提供更好的用户界面体验。这在数据报表、表格类应用中尤为常见。 首先，要理解...
JQuery固定表头 及左侧列
为解决这一问题，开发者通常采用JavaScript来实现Table标题行的固定，使其在滚动时始终保持可见。本文将详细介绍四种不同的JavaScript方法来实现HTML固定Table标题行。 1. **CSS Sticky Positioning** CSS3中的`...
在网页设计中，固定表头和第一列是常见的需求，特别是在处理大数据量的表格时，为了保持用户在滚动查看数据时能始终看到列标题和行标识，这种布局方式显得尤为重要。"表头、第一列固定的表格"这个主题，通常涉及到...
标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中，我们有两个关键文件：`Index.html` 和 `Index.js`。`Index.html` 是页面的结构，它包含了一个表格元素，并且可能已经...
然而，当表格内容过多导致需要滚动时，固定表头的设计能让用户在浏览过程中始终清晰地看到列标题，提高用户的使用体验。这就是"jQuery带滚动条头部固定表格代码"所解决的问题。 jQuery 是一个广泛使用的JavaScript...
2. **表头固定**：表头通常指的是位于表格最上方的行，包含列标题。当表格数据较多时，滚动向下查看，表头会消失，无法快速识别各列内容。通过冻结表头，即使在滚动浏览数据时，列标题也会保持在屏幕上部，方便用户...
5. **固定列宽**：如果需要某些列保持固定宽度，可以在设置列宽时特别处理。例如，第一列始终保持100像素，其余列等分剩余空间： ```易语言 .对于 i 从 0 到 表格1.获取列数 - 1 .如果 i = 0 表格1.设置列宽 (i,...
1、数据较多时需要横向竖向滚动，很多数值记不清谁是谁了，所以需要主要标题内容需要固定。 2、通常的首行首列的固定，下方滚动条左侧会空缺一块，不够美观，我加了一层悬浮的div 给予适应
二、Flex高级表格列锁定 1. Locking机制：Flex Advanced Data Grid支持列锁定功能，这使得用户可以固定左侧或右侧的列，以便在滚动时保持这些关键列可见。 2. LockingGrid：使用LockingGrid类可以创建一个可锁定列的...