html冻结表格——类似excel功能
2024-07-03 08:41:05
这是一个html，无论怎么拖，横向标题和竖向标题都被固定
这是html代码：
<!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) {//TableID 要锁定的Table的ID//FixColumnNumber 要锁定列的个数//width 显示的宽度//height 显示的高度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>
类似excel里的冻结表格，横竖都可以做到冻结，这样的话不管怎么拉动滚动条横向标题和竖向标题都被固定，一直可见。
<br>
<tablestyle="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><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>
html冻结表格——类似excel功能相关推荐
- jQuery实现表格导出Excel功能
jQuery实现表格导出Excel功能 jquery实现表格导出Excel功能,这里我们用到jquery的一个小插件:jquery-table2excel jquery-table2excel线上引用 ...
- html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...
- SpringBoot后端+Vue之AntDesignVue前端实现查询表格导出excel功能
用的是阿里的com.alibaba.excel包,pom的依赖如下 <dependency><groupId>com.alibaba</groupId><ar ...
- 基于UGUI实现类似Excel表格功能
曾经有一个类似这种需求,想在Unity中实现类似Excel表中的一个功能,能在Scene窗口中"新增行"."可视化配置"."所见所得".&q ...
- 牛逼，一款纯前端类似 excel 的在线表格
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是你们的章鱼猫. 今天的推荐是来自公众号粉丝(mengshukeji)的投稿,我们 GitHub 精选公众号希望 ...
- Handsontable 类似 excel 表格编辑器
HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置 核心由原生 js (es6) 编写,通过webpack打 ...
- python给excel排序_Python实现EXCEL表格的排序功能示例
Python实现EXCEL表格的排序功能示例 EXCEL的数值排序功能还是挺强大的,升序.降序,尤其自定义排序,能够对多个字段进行排序工作. 那么,在Python大法中,有没有这样强大的排序功能呢?答 ...
- 如何在SAP 分析云中使用类似Excel的表格 | 易拓科技
许多客户在日常工作中使用 Microsoft Excel,更习惯于网格化的数据布局.因此,2021年起,SAP 分析云进一步优化了故事中的表格功能,方便用户使用网格化的布局来显示数字.在本篇文章中,阿 ...
- 一款纯前端类似excel的在线表格
真正的大师,永远都怀着一颗学徒的心! 一.项目简介 一款纯前端类似excel的在线表格,功能强大.配置简单.完全开源,三步实现一个在线表格 第一步 通过CDN引入依赖 <link rel='st ...
最新文章
- 推荐系统的作用和问题
- 最新京东炸年兽活动一键做任务工具v1.4
- 办公自动化-python编写ppt-创建第一页-主标题与内容的编写
- linux 扩展内存,linux扩展虚拟内存
- ifconfig输出网口和ip
- 大学生专业计算机培训心得,大学生计算机培训心得体会
- 什么情况下使用10分钟邮箱？8个临时邮箱推荐
- AngularJS - $uibModal - 自定义模态框大小
- 软考数据库-无损联接分解
- excel自动调整列宽_Java 设置Excel自适应行高、列宽
- Sensor--Gyro工作原理
- Android App上架应用市场所需资料说明
- Golang interface 接口详解
- 农业物联网系统功能特点
- python中从键盘输入五个单词输出以元音字母开头的单词_matlab中 从一个文本读出所有英文单词,并且把所有以元音字母开头的字母首字母 的代码怎么写...
- ei检索的cpss_国际检索系统收录我校期刊
- Artifact ssmbuildFinal:war exploded: Artifact is being deployed SSM整合
- 百度智能云服务器BCC实例在线配置变更
- Unity与FBX--为什么使用FBX文件
- 洋哥线下见面会，小姐姐都问了什么？