用JQuery实现Fix表头表格
我的技术要点：
１、用两个表，其中一个是表头，另一个是表格做表体
２、两个表格使用相同的百分比宽度
３、在IE下，如果列溢出，则采用 ... 来表示溢出，FF下自动隐藏
４、采用JQuery，把表头的列宽，设置到表体第一列。
５、在窗体大小改变时，自动设置表头的容器宽度为表体的宽度。
不复杂，代码如下：
我的技术要点：
１、用两个表，其中一个是表头，另一个是表格做表体
２、两个表格使用相同的百分比宽度
３、在IE下，如果列溢出，则采用 ... 来表示溢出，FF下自动隐藏
４、采用JQuery，把表头的列宽，设置到表体第一列。
５、在窗体大小改变时，自动设置表头的容器宽度为表体的宽度。
效果如图：
不复杂，代码如下：
固定表头表格<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.oddtr
{
background-color:#efefef;
}
.fixheader_table table
{
border-collapse:collapse;
width:100%;
border-width:0px;
}
.fixheader_table table td
{
border-collapse:collapse;
width:100%;
border:solid 1px #ccf;
}
.fixheader_table > .header
{
}
.fixheader_table > div.body
{
overflow:auto;height:200px; /* IE下这样设置不管用,没有办法，我只好设置到 style中了 */
border:solid 1px red;
}
.ellipsis table{
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
.ellipsis table tr{
height:25px;
line-height:25px;
}
.ellipsis table td{
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(
) ；需与overflow:hidden;一起使用。*/}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
var headerCells = $('.fixheader_table .header table tr:first td');
$('.fixheader_table .body table tr:first td').each(function(i,n)
{
$(this).css('width',headerCells.eq(i).css('width'));
});
//关联宽度
$(window).resize(function () {
$('.fixheader_table .header').width($('.fixheader_table > .body table').width());
}).triggerHandler('resize');
});
</script>
</head>
<body>
<div class="fixheader_table">
<div class="header ellipsis">
<table>
<tr>
<td style="width:40%">标题</td>
<td style="width:30%">姓名</td>
<td style="width:30%">时间</td>
</tr>
</table>
</div>
<div class="ellipsis body" style="overflow:auto;height:200px;">
<table>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
<tr>
<td>中国人民大团结万岁</td>
<td>张三</td>
<td>2009-3-6</td>
</tr>
</table>
</div>
</div>
</body>
</html>
QQ：273352165
evlon#126.com
转载请注明出处。
