(转)用JQuery实现Fix表头表格
本文转载自：http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html
我的技术要点：
１、用两个表，其中一个是表头，另一个是表格做表体
２、两个表格使用相同的百分比宽度
３、在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>
(转)用JQuery实现Fix表头表格的更多相关文章
- 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细
阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...
- jQuery——能够编辑的表格
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635 今天学习了利用jQuery实现能够编辑的表格这个 ...
- FineUI小技巧（7）多表头表格导出
前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述.今天我们要更进一步,介绍下如何导出多表头表格. 多表头表格的标签定义 在 ...
- jQuery（6）——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- HTML多表头表格
1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- JS实现点击表头表格自动排序（含数字、字符串、日期）
这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
- [转]jQuery实现清空table表格除首行外的所有数据
1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分. 其中J_tab_fam是table的id. 1 $("#J_tab_fam tr:no ...
- 第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...
随机推荐
- 五 浅谈CPU 并行编程和 GPU 并行编程的区别
前言 CPU 的并行编程技术,也是高性能计算中的热点,也是今后要努力学习的方向.那么它和 GPU 并行编程有何区别呢? 本文将做出详细的对比,分析各自的特点,为将来深入学习 CPU 并行编程技术打下铺 ...
- java CAS
在Doug Lea提供的cucurenct包 (J.U.C)中,CAS理论是实现整个java包的基石. Compare and Swap 在这里,CAS 指的是现代 CPU 广泛支持的一种对内存中 ...
- node模拟http服务器session机制-我们到底能走多远系列（36）
我们到底能走多远系列(36) 扯淡: 年关将至,总是会在一些时间节点上才感觉时光飞逝,在平时浑浑噩噩的岁月里都浪费掉了太多的宝贵.请珍惜! 主题: 我们在编写http请求处理和响应的代码的时 ...
- sqlserver mdf向上兼容附加数据库（无法打开数据库 'xxxxx' 版本 611。请将该数据库升级为最新版本。）
最近工作中有一个sqlserver2005版本的mdf文件,还没有log文件,现在需要 附加到sqlserver2012,经过网上一顿搜索,把完整的过程奉上,供大家参考 首先创建数据库 再设置数据库的 ...
- JS初学之-for套for遍历二维数组
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- 网站后台的lnmp启动与重启
网站建立时间很长了,经常挂掉,又没有其他技术人员带.只好自己摸索着修复. 到今天网站已经挂掉了一个礼拜.请求各路大神无果后决定自己修复. 首先出现的是502,网关错误. 1.上阿里云服务用户中心重新启 ...
- POJ-1155 TELE （树形DP+分组背包）
题目大意:给一棵带边权的有根树,每个叶子节点有权.边权表示代价,叶子节点的权值代表可以补偿多少代价.问从根节点最多可以到达多少个叶子,使得付出的总代价不大于0. 题目分析:定义状态dp(u,k)表示从 ...
- eclipse关掉jsp,js的语法验证
转载:http://blog.csdn.net/testcs_dn/article/details/39058959 eclipse加速之禁用JS.jsp等文件的语法验证 去除eclipse的JS验证 ...
- AS3 Embed用法笔记
1. 用[Embed]元数据标签可以嵌入GIF,PNG,JPEG,或者MP3文件.ActionScript代码的顺序非常重要.你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Cl ...
- soap的简单实现(PHP)
1.非wsdl模式 (1)函数文件 testphp/ServiceFunctions.class.php <?php /** * @author 左小兵 * */ class ServiceFu ...