多表头固定demo--html Table
<!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></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
table th
{
background-color: Gray;
}
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position(); var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top }); var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中 $this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
}); //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 400px; overflow: auto;">
<table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
<thead>
<tr>
<th rowspan="2" style="width: 30%">
项目
</th>
<th colspan="2">
常规性税金
</th>
<th colspan="2">
非常规性税金
</th>
<th rowspan="2" style="width: 10%">
工程税
</th>
</tr>
<tr>
<th style="width: 15%">
城建税
</th>
<th style="width: 15%">
教育费附加%
</th>
<th style="width: 15%">
堤围防护费%
</th>
<th style="width: 15%">
个人所得税%
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
摘自：http://www.cnblogs.com/dataadapter/archive/2012/09/06/2672190.html
多表头固定demo--html Table的更多相关文章
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- html bootstrap 表头固定在顶部，表列 可以自由滚动的效果
该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/ ...
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- IE的表头固定/表头不动（使用expression）
本文主要介绍在IE浏览器中,实现表头固定的一种方法.这种方法使用到了 IE 浏览器特有的 expression 方法. 表头固定DEMO1 主要代码: <style type="tex ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
随机推荐
- poj1456(贪心+并查集)
题目链接: http://poj.org/problem?id=1456 题意: 有n个商品, 已知每个商品的价格和销售截止日期, 每销售一件商品需要花费一天, 即一天只能销售一件商品, 问最多能买多 ...
- hdu1492(约数个数定理)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1492 这里先讲一下约数个数定理: 对于正整数x,将其质因分解为 x = pow(p1, a) * po ...
- NYOJ之字符串逆序输出
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAswAAAJaCAIAAAC0jIYTAAAgAElEQVR4nO3du27rSpbGcb+Ecz2IU+ ...
- 动手动脑之小程序：TryAndCatch
源代码 import java.util.InputMismatchException;import java.util.Scanner;public class TryAndCatch {publi ...
- SQL中的多表查询，以及JOIN的顺序重要么？
说法是,一般来说,JOIN的顺序不重要,除非你要自己定制driving table. 示例: SELECT a.account_id, c.fed_id, e.fname, e.lname -> ...
- mysql 如何设置自动增长序列 sequence(一)
背景:由于项目需要,必须用mysql设置主键自增长,而且想用字符串的.经过上网查找并且实验,终于做出了一套方案.现在就共享给大家! 解决思路:由于mysql不带sequence,所以要手写的,创建一张 ...
- c++ 的 static_cast
http://www.cnblogs.com/pigerhan/archive/2013/02/26/2933590.html #include "Person.h" #inclu ...
- oracle 10g\11g用imp导入数据的时候报错：ORA-01658: 无法为表空间 MAXDATA 中的段创建 INITIAL 区 错误解决
备份文件是从11g中通过exp命令导出的,在10g下使用imp导入出现了上述错误,以为是低版本的不支持高版本的备份,于是使用11g测试,还是上面的问题. 其实是表空间大小不够的问题,下面是网上的解答: ...
- NBU expired Media，Media ID not found in EMM database
Subject:When attempting to expire a media in Veritas NetBackup (tm) 6.0 with the bpexpdate command, ...
- hdu 4068 福州赛区网络赛H 排列 ***
拍的太慢了,很不满意 排完序之后,枚举自己和对手状态,若被击败,则再枚举自己下一个策略,直到可以击败对手所有的策略 #include<cstdio> #include<iostrea ...