html table冻结列
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %> <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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>
<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 != ) {
$("#" + 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", "");
});
var HeadHeight = $("#" + TableID + "_tableHead thead").height();
HeadHeight += ;
$("#" + TableID + "_tableHead").css("height", HeadHeight);
$("#" + TableID + "_tableFix").css("height", HeadHeight);
var ColumnsWidth = ;
var ColumnsNumber = ;
$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber++;
});
ColumnsWidth += ;
ColumnsWidth--;
//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": "", "background-color": "Silver" });
$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - , "position": "relative", "z-index": "", "background-color": "Silver" });
$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - , "position": "relative", "z-index": "", "background-color": "Silver" });
$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "" });
if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + );
}
if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + );
}
$("#" + 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", , , );
});
</script>
</head>
<body>
<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="" cellspacing="" cellpadding="">
<thead>
<tr>
<th style="text-align: center; width: 80px" rowspan="">姓名</th>
<th style="text-align: center; width: 80px" rowspan="">班级</th>
<th style="text-align: center" colspan="">成绩</th>
</tr>
<tr>
<th style="text-align: center" colspan="">主科</th>
<th style="text-align: center" colspan="">文科</th>
<th style="text-align: center" colspan="">理科</th>
<th style="text-align: center; width: 80px" rowspan="">总分</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>
</thead>
<tbody>
<!-- 数据行 -->
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>学生32</td>
<td>班级1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
html table冻结列的更多相关文章
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- bootstrap table 冻结列 ie 兼容
修改前: Chrome效果 Ie11效果 修改后: Ie11效果 修改bootstrap-table-fixed-columns.js文件 修改其中的initBody方法 修改为
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题
前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...
- easy ui datagrid 设置冻结列
为了冻结列,您需要定义 frozenColumns 属性.frozenColumn 属性和 columns 属性一样. $('#tt').datagrid({ title:'Frozen Column ...
- EasyUI创建DataGrid及冻结列的两种方式
第一种方式:通过HTML标签创建数据表格控件 <table class="easyui-datagrid" title="基本数据表格" style ...
- css冻结列的效果
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- 怎么在Microsoft Project中冻结列
在用Project排项目计划的时候如果在Gantt图中列比较多,左右滚动的时候就会经想像如果能想Excel一样冻结某些列就方便多了,其实在Project中虽然没有冻结列的功能,但通过一些变通方法还是可 ...
- js Table冻结表头示例代码
Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function ...
- EasyUI 冻结列
一.如果是js绘制的,设置frozenColumn属性就可以,frozenColumn 属性和 columns 属性都是设置列,frozenColumn是设置冻结列 $('#tt').datagrid ...
随机推荐
- js点击打开一个固定宽高的网页
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- oracle 触发器学习
触发器使用教程和命名规范 目 录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...
- 提升linux下tcp服务器并发连接数限制
1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时,最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统 ...
- C++STL内存管理方法（g++版）
STL作为C++的经典作品,一直备受人们关注.本文主要介绍STL的内存管理策略. 早期的STL内存管理 第一次接触STL源码是看侯捷先生的<STL源码剖析>,此书通俗易懂,剖析透彻,是极佳 ...
- SQL Server 数据类型映射
SQL Server 和 .NET Framework 基于不同的类型系统. 例如,.NET Framework Decimal 结构的最大小数位数为 28,而 SQL Server 的 decima ...
- '++' needs l-value
碰到这样一段代码:char c[]= "abc";while(*c){printf("%c",*c);c++;} 错误定位到 c++ ; 这一行,提示: ' ...
- unity 3d孤岛求生案例代码解析
这是第一人称控制器脚本,如果把摄像机放在胶囊体后面感觉就是第三人称了啊. #pragma strict var speed : float = 6.0; var jumpspeed: float = ...
- DIOCP之开发流程图之Server
server开发流程图 暂时没有找到好的流程图绘制软件,就用画图来做的,比较乱,太慢了
- oracle合并版本
1) 添加字段,并自增 第一步:alter table TOWN add ID int 第二步:Update TOWN set id=rownum; Commit; 2) 更新表(另一张表) ...
- 干货 | Docker文件系统的分层与隔离
现在就开始今天的分享~ M老师:docker 的很多特性都表现在它所使用的文件系统上,比如大家都知道docker的文件系统是分层的,所以它可以快速迭代,可以回滚.这个回滚机制跟github很像,每次提 ...