1、下载table_lock.js
2、引用
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="table_lock.js"></script>
<script type="text/javascript">
$(document).ready(cloneTableHeader_Width);
function cloneTableHeader_Width(){
$(document).ready(function () {
FixTable("MyTable", 2, screen.width, 200);
});
}
</script>
</head>
<body>
<table id="MyTable">
<thead>
<tr>
<th></th>...
</tr>
</thead>
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
</table>
</body>
</html>
3、该表格锁定兼容主流的浏览器如IE9 、Firefox、Opera等。
出自:http://blog.csdn.net/SongYanJun2011
分享到:
相关推荐
本文将深入探讨如何使用`table`元素,并结合jQuery实现表头及列的固定,以便在滚动时保持关键信息可见,提高用户体验。 首先,让我们了解`table`的基本结构。一个`table`由`<table>`标签开启,`</table>`标签关闭。...
对于不支持这些特性的老版本浏览器,可能需要使用一些JavaScript库如jQuery Fixed Header Table插件,或者使用传统的方法,如创建重复的表头和第一列,并通过JavaScript同步滚动状态。 总结起来,实现移动端table的...
表头锁定(Fixed Table Head)是指在用户滚动表格内容时,表头始终保持可见,以便用户在浏览大量数据时能持续看到列名。这提高了用户的阅读体验,使他们更容易理解数据的意义。实现这一功能通常需要通过CSS定位...
JQuery固定表头 及左侧列
锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2...
在提供的压缩包文件"复杂表头+锁定列"中,可能包含了实现这一功能的示例代码,包括HTML、CSS和JavaScript文件。通过研究这些文件,开发者可以学习如何在自己的项目中应用这些特性,或者根据需求进行定制。 总的来说...
在Vue移动端项目中,开发人员经常遇到需要创建具备固定表头和首列的表格,以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下,利用Vue的核心特性实现这样一个功能。 首先,我们需要理解...
为了解决这个问题,"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置,无论用户如何滚动,表头始终可见,提高了用户的浏览体验。 在HTML中,实现固定表头通常需要CSS和JavaScript的配合。...
.setFristRowBackGroudColor(R.color.table_head)//表头背景色 .setTableHeadTextColor(R.color.beijin)//表头字体颜色 .setTableContentTextColor(R.color.border_color)//单元格字体颜色 .setNullableString(...
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。 因为方法很简单,就未封装成插件的形式,仅仅以代码...
为了解决这个问题,"table冻结表头"插件应运而生。这个插件专门用于实现表格的头部和/或列的冻结,使得在浏览长表格时,表头始终可见,增强了用户体验。 "table冻结表头"是一款基于jQuery的轻量级插件,它允许...
2. 实现方法:在 `colModel` 配置中,通过设置 `frozen` 属性为 `true` 来锁定列。例如: ```javascript colModel: [ { name: 'name', index: 'name', sorttype: "string", frozen: true } ] ``` 此外,需要调用 ...
Html纯js固定表头、左侧首列,无须使用第三方插件
"js控制锁定表头表列"的实践就是解决这个问题,它允许我们在滚动时保持表头和指定列始终可见,提高用户体验。 首先,我们需要理解JavaScript(简称js)在网页中的作用。JavaScript是一种解释型、跨平台的脚本语言,...
birt报表合并以及表头锁定功能的实现。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
在这个特定的Demo中,开发者使用了...通过查看和学习这些文件,你可以更深入地理解如何使用HTML和JavaScript来实现固定表头和锁定列的效果。如果你想要在自己的项目中使用或修改这个功能,记得先了解和分析这些源代码。
-- 表头和左侧列内容 --> </table> <table> <!-- 右侧列内容 --> </table> ``` 这个例子中,我们使用了CSS Grid将表格分为两部分,左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口...
原生JS写的表头固定及左边列固定功能,原创代码,代码比较简单,兼容IE8+、谷歌、火狐等主流浏览器,当前版本为1.7,此版本修正了性能问题,支持合并后的表格单元格,表格单元格可以不用设置宽度了。当表格总宽度...
在网页设计中,"html行列表头锁定"是一种常见的需求,尤其在处理大数据表格时,为了保持用户在滚动查看表格内容时能始终看到列标题,就需要实现表头的固定锁定。这种技术通常应用于数据可视化、报表展示或者数据分析...