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 ...
随机推荐
- WIn7系统下 打开.exe程序出现已停止工作关闭程序之解决办法
新装WIN7系统出现 .NET组建没有安装 可到官网下载安装 NETFx4.0 运行MVB 上位机SIM.EXE出现应用程序已停止工作问题 解决办法: 需关闭WIN7 DEP 如下 开始-运行( ...
- Objective - C NSArray不可变数组和NSMutableArray可变数组
OC中存储数据最常用 的两个容器就是数组和字典,而作为最常用的,应该了解这所有的特点,及用法. OC中的数组是一个容量,有序的管理了一系列元素,并且存放在数组里的元素,必须是对象类型. 不可变数组,见 ...
- php工作笔记5-css定位
1. CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框 ...
- ios硬件编码
video-videoToolbox: http://www.cnblogs.com/sunminmin/p/4976418.html audio-AudioToolbox: http://blog. ...
- .NET （上传的）文件下载
string strPath = “//UploadFiles/Equipment/QQ截图.png” // 文件有效地址 FileInfo fileInfo = new FileInfo(strPa ...
- CSS3学习内容与心得
今天2005年7月9号,博客这个东西还真不懂,以前吧我不认识它,它也不认识我.没辙,汤老要我们写,就写吧. 写什么好呢?那就写今天学习的css3的一些要点吧. css这门课程几乎都学完了.而我觉得我还 ...
- wp中TextBox在中文输入法下清空问题
如图,在中文输入法下我希望点击“X”,然后把TextBox清空,一般来说,直接用TextBox.Text = "";或者TextBox.Text = String.Empty;就可 ...
- mysql 允许远程访问
原来装mysql数据库的时候就想,这个只要在本地访问就可以了,没有必要让远程访问.可是,今天想把数据放到远程的机器上,却发现,不是简单的将sql语句(指导出的语句)执行一遍就行了,对于那些自增的字段, ...
- layer弹出层不居中解决方案
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- .Net 零星小知识
1. 深拷贝和浅拷贝 单纯讲这两个词,其实不容易记住区别,但是看看他们对应的英语单词就显而易见了: 深拷贝: Clone 浅拷贝: Copy 记住了这个,下面在看看详细一点的信息: Copy: 只是复 ...