冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览

最新推荐文章于 2021-06-09 21:24:02 发布
最新推荐文章于 2021-06-09 21:24:02 发布
阅读量3.9k 收藏
点赞数
分类专栏： jquery 文章标签： table html jquery function div xhtml

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> new document </title> <META NAME="Generator" CONTENT="EditPlus,Microshaoft"> <META NAME="Author" CONTENT="EditPlus,Microshaoft"> <META NAME="Keywords" CONTENT="EditPlus,Microshaoft"> <META NAME="Description" CONTENT="EditPlus,Microshaoft"><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript"><!-- function FixTable(TableID, FixColumnNumber, width, height) { /// <summary> /// 锁定表头和列 /// <para> sorex.cnblogs.com </para> /// </summary> /// <param name="TableID" type="String"> /// 要锁定的Table的ID /// </param> /// <param name="FixColumnNumber" type="Number"> /// 要锁定列的个数 /// </param> /// <param name="width" type="Number"> /// 显示的宽度 /// </param> /// <param name="height" type="Number"> /// 显示的高度 /// </param> if ($("#" + TableID + "_tableLayout").length != 0) { $("#" + TableID + "_tableLayout").before($("#" + TableID)); $("#" + TableID + "_tableLayout").empty(); } else { $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); } $('<div id="' + TableID + '_tableFix"></div>' + '<div id="' + TableID + '_tableHead"></div>' + '<div id="' + TableID + '_tableColumn"></div>' + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); var oldtable = $("#" + TableID); var tableFixClone = oldtable.clone(true); tableFixClone.attr("id", TableID + "_tableFixClone"); $("#" + TableID + "_tableFix").append(tableFixClone); var tableHeadClone = oldtable.clone(true); tableHeadClone.attr("id", TableID + "_tableHeadClone"); $("#" + TableID + "_tableHead").append(tableHeadClone); var tableColumnClone = oldtable.clone(true); tableColumnClone.attr("id", TableID + "_tableColumnClone"); $("#" + TableID + "_tableColumn").append(tableColumnClone); $("#" + TableID + "_tableData").append(oldtable); $("#" + TableID + "_tableLayout table").each(function () { $(this).css("margin", "0"); }); var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID + "_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight); var ColumnsWidth = 0; var ColumnsNumber = 0; $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { ColumnsWidth += $(this).outerWidth(true); ColumnsNumber++; }); ColumnsWidth += 2; if ($.browser.msie) { switch ($.browser.version) { case "7.0": if (ColumnsNumber >= 3) ColumnsWidth--; break; case "8.0": if (ColumnsNumber >= 2) ColumnsWidth--; break; } } $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); $("#" + TableID + "_tableFix").css("width", ColumnsWidth); $("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); }); $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }); $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }); $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }); $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width()); $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17); } if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); } $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());}$(document).ready(function () { FixTable("MyTable", 2, 600, 400); });//--></script></head><body>鸣谢原文转自<br><a href="http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html">http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html</a><br><table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black" id="MyTable" border="1" cellspacing="0" cellpadding="0"><thead> <tr> <th style="text-align: center; width: 80px" rowspan="3"> 姓名 </th> <th style="text-align: center; width: 80px" rowspan="3"> 班级 </th> <th style="text-align: center" colspan="10"> 成绩 </th> </tr> <tr> <th style="text-align: center" colspan="3"> 主科 </th> <th style="text-align: center" colspan="3"> 文科 </th> <th style="text-align: center" colspan="3"> 理科 </th> <th style="text-align: center; width: 80px" rowspan="2"> 总分 </th> </tr> <tr> <th style="text-align: center; width: 80px"> 语文 </th> <th style="text-align: center; width: 80px"> 数学 </th> <th style="text-align: center; width: 80px"> 英语 </th> <th style="text-align: center; width: 80px"> 政治 </th> <th style="text-align: center; width: 80px"> 历史 </th> <th style="text-align: center; width: 80px"> 地理 </th> <th style="text-align: center; width: 80px"> 物理 </th> <th style="text-align: center; width: 80px"> 化学 </th> <th style="text-align: center; width: 80px"> 生物 </th> </tr> <!-- <tr> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 姓名 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 班级 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 语文 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 数学 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 英语 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 政治 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 历史 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 地理 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 物理 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 化学 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 生物 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 总分 </th> </tr> --></thead> <tbody> <!-- 数据行 --> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> <tr> <td> 学生32 </td> <td> 班级1 </td> <td> 29 </td> <td> 25 </td> <td> 146 </td> <td> 28 </td> <td> 79 </td> <td> 73 </td> <td> 47 </td> <td> 8 </td> <td> 91 </td> <td> 526 </td> </tr> </tbody></table></body></html>

 

http://archive.cnblogs.com/a/2133434/

小博
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
冻结表头HTML报表制作方法
guxinghan12345的专栏
06-23 3636
报表显示在网页上，拖拽网页查看报表时允许报表上表头和左表头被固定。对于高度/宽度都比较大的报表，实现表头锁定会给报表使用者提供很大的方便，快逸报表可以实现上、左双向单独表头锁定，甚至是双向同时锁定，报表浏览者查看“高大”报表时再也不必上下左右拉动滚动条来对照表头了。 上图显示的是一个还未固定表头的报表，如果我们拉动滚动条，表头也会跟着数据区一起滚动，下面就以这个报表为例，详细讲解一下如果
table的行列冻结、行冻结、列冻结
06-13
本主题主要围绕"table的行列冻结、行冻结、列冻结"展开，讲解如何使用jQuery实现这一功能，并确保其在主流浏览器上的兼容性。 首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也...
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
表格 冻结 表头 和 列 代码分享（目前只支持IE）
tianshibaijia
01-09 130
相信 大家都有过 一个表格中有大量的数据，挡在前台或后台显示的时候，过多的数据会把表格显示的很宽 或很长，从而给用户的体验大打折扣， 大家 也可能会想到很多的解决方案解决这一问题。 我的方案就是 能不能把 其 表格的 的表头 或者 列 固定住，从而实现当用户拉动垂直滚动条的时候，表头行固定位置不变动， 当用户拉动水平滚动条时，表头列 不变动。 今天就 分享一个关于html表格冻...
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
yjxfox的专栏
11-27 3870
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     new document                 http://code.jquery.com/jquery-1.6.1.min.js">>     function
html表格第一列和最后一列冻结
cxu123321的博客
08-12 1093
html表格第一列和最后一列冻结 阿闰 使用div思路，div溢出滚动， js动态获取宽度， 缺陷，滚动条不是很美观 .zuo{ width: 15%; height: 100%; /* border: 1px solid green; */ float:left; background: #f0f0f0; } .zhong{ width: 69%; height: 100%; ...
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...
锁定表头和固定列(Fixed table head and columns)
05-17
这个经典案例就是关于如何在网页上创建一个既能滚动又能保持表头和左侧列固定的表格。 表头锁定（Fixed Table Head）是指在用户滚动表格内容时，表头始终保持可见，以便用户在浏览大量数据时能持续看到列名。这提高...
jQuery实现冻结表头的方法
10-24
jQuery 提供了一种灵活的方式来实现这一需求，通过扩展 jQuery 对象的方法来创建一个能够冻结表头的插件。以下是一个关于如何使用 jQuery 实现冻结表头的详细说明。 首先，我们了解 jQuery 的 `.CloneTableHeader` ...
html让内容冻结,html 导航冻结效果
weixin_39883129的博客
06-09 513
首先，介绍一下案例背景，设置冻结前的效果和代码如下 .page-top {width:100%;height:46px;background:rgba(1,47,99,0.95);min-width:950;display:block;}.ask-panels {width:100%;height:63px;background:#fff;overflow:hidden;border-top:1p...
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
html锁定表头冻结行列兼容多浏览器
07-13
html 锁定表头 冻结行列 兼容 多浏览器 仿excel 测试兼容ie8, 火狐firefox, chrome
HTML固定Table标题行的四种方法
08-31
Javascript脚本实现HTML页面中表格Table的标题行固定位置，并与表格内容对齐。
html锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
js 实现html前两列冻结,JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案...
weixin_35714733的博客
06-09 676
前言：最近项目里面需要用到表格的冻结列功能，所谓“冻结列”，就是某些情况下表格的列比较多，需要固定前面的几列，后面的列滚动。遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章。一、起因回顾最近项目里面有一个表格需求，该表格列是动态产生的，而且列的数量操作一定值以后就会出现横向滚动条，滚动的时候需要前面几列固定。也就...
基于IE与css的表格行头与多层列头锁定方法
Hello World
11-20 1164
（左边图锁定了行头与列头，右边图仅锁定列头） 有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。 1、确定表格区域 定义一个有边框的div元素，并设置其overfloaw属性为scroll，保证该区域恒有一个垂直与水平滚动
jquery 动态的把table左边列表固定不动，右边可上下滑动。
num001的博客
01-31 7808
function FixTable(TableID, FixColumnNumber, width, height) {     if ($("#" + TableID + "_tableLayout").length != 0) {         $("#" + TableID + "_tableLayout").before($("#" + TableID));         $("
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
[html][jQuery]表头固定在顶部的一种实现思路
我是涛锅
06-29 5772
有时候当碰到要显示很多行又很多列的表格的时候，往往在翻到后面的时候已经对不上某一列是什么了。 所以需要将表头固定在顶部，而且是在滚动到表头被遮住的时候，才固定到顶部。先看效果图再讲一下我的实现思路 通过一个额外的table来显示固定顶端的表头，当滚动条滚动到某一位置（原数据表头被遮盖）的时候，显示这个固定的表头，反之则隐藏。 首先是显示数据的表格<table id="tMain"> <
qt tabwidget冻结表头和冻结列
最新发布
09-28
在Qt中，TabWidget是一个常用控件，用于创建具有多个选项卡的用户界面。要冻结TabWidget的表头和列，我们可以使用QHeaderView类和QTableWidget类。 首先，我们需要创建一个QTableWidget实例，并设置其行数和列数。然后，我们可以使用setVerticalHeader和setHorizontalHeader方法来设置表头。接下来，我们需要使用setHorizontalHeaderItem方法为每一列设置表头项。 要冻结表头，我们可以使用QHeaderView类的setHorizontalScrollMode方法将水平滚动模式设置为ScrollPerPixel，这样当我们滚动表格时，表头仍然保持固定。 要冻结列，我们可以使用QHeaderView类的setVerticalScrollMode方法将垂直滚动模式设置为ScrollPerPixel，这样当我们滚动表格时，列仍然保持固定。 综上所述，以下是一个示例代码： ```cpp QTableWidget* tableWidget = new QTableWidget(parent); tableWidget->setRowCount(rowCount); tableWidget->setColumnCount(columnCount); QHeaderView* verticalHeader = tableWidget->verticalHeader(); verticalHeader->setSectionResizeMode(QHeaderView::Fixed); //设置固定行高 QHeaderView* horizontalHeader = tableWidget->horizontalHeader(); horizontalHeader->setSectionResizeMode(QHeaderView::Fixed); //设置固定列宽 //设置表头 tableWidget->setHorizontalHeaderLabels(horizontalHeaders); tableWidget->setVerticalHeaderLabels(verticalHeaders); //冻结表头和列 horizontalHeader->setHorizontalScrollMode(QAbstractItemView::ScrollPerPixel); verticalHeader->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel); ``` 以上就是使用Qt的TabWidget冻结表头和列的方法。希望对你有帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值