固定table的表头和列头

最新推荐文章于 2024-07-05 10:49:33 发布
最新推荐文章于 2024-07-05 10:49:33 发布
阅读量1k 收藏 1
点赞数
分类专栏： web前端开发 文章标签： web前端
<!DOCTYPE HTML>
<html lang="en-US">
<head> 
<title></title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript">// <![CDATA[ 
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, 1000, 200); 
}); 
// ]]></script> 
<style><!-- 
.style1 
{ 
width: 137px; 
} 
#MyTable 
{ 
border-top: 1px solid #cc0000; 
border-left: 1px solid #cc0000; 
} 
#MyTable td,th 
{ border-bottom:1px solid #cc0000; 
border-right: 1px solid #cc0000; 
} 






--></style> 
<p><br /> </p> 
<table id="MyTable" style="border-bottom-color: black; border-top-color: black; width: 1000px; height: 200px; color: #000000; border-right-color: black; font-size: medium; border-left-color: #15b0e1;" border="0" cellspacing="0" cellpadding="0"> 
<thead> 
<tr><th style="text-align: center; width: 80px;" rowspan="2"> </th><th class="style1" style="text-align: center;" rowspan="2">项目</th><th style="text-align: center; width: 80px;" rowspan="2">公示栏</th><th style="text-align: center;" colspan="9">dddddddd</th><th style="text-align: center;" rowspan="2" colspan="2"> 总分 </th></tr> 
<tr id="game"><th style="text-align: center;" colspan="2">语文 数学 </th><th style="text-align: center;" colspan="2">英语 政治 </th><th style="text-align: center;" colspan="2">历史 地理 </th><th style="text-align: center;" colspan="2">物理 化学 </th><th style="text-align: center; width: 80px;">生物 </th></tr> 
</thead> 
<tbody><!-- 数据行 --> 
<tr> 
<td> </td> 
<td class="style1"> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>ss </td> 
<td class="style1">上线时间 </td> 
<td>1 </td> 
<td>29 1</td> 
<td>25 2</td> 
<td>146 </td> 
<td>28 </td> 
<td>79 </td> 
<td>73 </td> 
<td>47 </td> 
<td>8 </td> 
<td>91 33</td> 
<td>526 qq</td> 
<td>dd</td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">在线人数 </td> 
<td>2 </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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td>s</td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<p> </p> 
</body>
</html>
大Luo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table固定表头和列头
12-15
固定表头和列头
table表头及列固定
10-17
总的来说，通过HTML的`table`元素、CSS的定位属性和jQuery的事件处理，我们可以实现表头和列的固定，使得在长表格滚动时，关键信息始终保持可见。然而，这种方法可能需要针对不同浏览器和屏幕尺寸进行调整，以确保...
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 972
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
html table 固定表头和列
09-21
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
实现Table表头和列固定
08-01
"实现Table表头和列固定"的目标就是解决这一问题，保持表头在滚动时始终显示，同时支持多表头和多列固定，确保布局清晰，无错位。 首先，我们需要理解HTML中的`<table>`元素是用于创建表格的基本结构。它由`<thead>...
asp.net html+table固定表头和左侧列.rar
08-20
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文).zip
08-06
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文)
mysql-9.0.1-winx64-debug-test.zip
08-06
mysql
java-springboot+vue疗养院管理系统实现源码(项目源码-说明文档)
08-06
java-springboot+vue疗养院管理系统 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
java-springboot+vue教学辅助平台实现源码(项目源码-说明文档)
08-06
java-springboot+vue教学辅助平台 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
蚂蚁人工智能综合应用系统前端
08-06
目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI
rx_a1_analysis.v
08-06
rx_a1_analysis
GolangM-Classify-mas笔记
08-06
GolangM-Classify-mas笔记
5G智慧灯杆及合杆解决方案.pptx
08-06
5G智慧灯杆及合杆解决方案.pptx
[毕业设计]VB+Access高校部门干部资料管理系统(源代码+论文).zip
08-06
[毕业设计]VB+Access高校部门干部资料管理系统(源代码+论文)
ruoyi-vue-pro定时任务
最新发布
08-06
定时任务·
毕业设计，基于ASP+ACCESS开发的酒店预定管理系统，内含完整源代码，数据库，开题报告，毕业论文
08-06
毕业设计，基于ASP+ACCESS开发的酒店预定管理系统，内含完整源代码，数据库，开题报告，毕业论文 在高节奏生活的今天，人们整天在各个城市穿梭忙碌着，在过去跑到哪个城市后才能进行预定客房，现在看来是否显得太麻烦,目前很多酒店都已经开始使用通过互联网进行客房预订系统。这样进行酒店的管理就显得更加的轻松。宏都大酒店虽然已经实施了内部的c/s结构的酒店客房管理系统，但是仍然存在上述所说的问题。于是我试着帮他们制作开发能在网上实现预订客房的系统。 宏都大酒店管理信息系统中不能通过互联网方式进行客房预订，通过本次设计主要实现通过互联网方式进行客房预订。让客户足不出户坐在家里就能预订出自己想要的客房。主要功能有：酒店简介、客房简介、客房报价、客房预订信息提交，预订信息查询及修改，删除，等等）管理员信息查询、回复预订信息等功能，真正实现酒店的无纸化，电子信息化、无距离限制的进行客房信息的预订。 本软件的后台数据库也采用微软公司的大型数据库SQLSERVER，与原C/S系统的数据库SQLSERVER相同，进行了一次无缝链接，也就是说在原有SQLSERVER数据库上面进行适当的添加表，使得能保持在原
Huawei USG6000F-V600R023SPH120
08-06
Huawei USG6000F_V600R023SPH120，里面包含补丁说明书和补丁安装指导书，该补丁支持哪些型号，支持哪些版本可以安装当前补丁，请参考补丁说明书和补丁安装指导书。
table左侧一列固定和固定表头
05-25
要实现左侧一列固定和固定表头，可以使用CSS的position属性和overflow属性。 首先，将表格的容器（例如div）设为position:relative，这样就可以使用绝对定位来实现左侧一列固定。 然后，在表格的thead中添加一个tr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值