(转)用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)表单域 - ...

随机推荐

java 中获取文件路径
方案一: 文件目录如下: 配置文件:firehosetos3sample.properties在src目录下面第一层,与包是一层的在Getpath_ClassLoader.java类中: Syste ...
apt-get 的常用使用说明
API神命令: apt-get -h >>help.txt apt 1.0.10.2ubuntu1,用于 amd64 体系结构,编译于 Oct 5 2015 15:55:05用法: apt ...
python numpy 模块简单介绍
用python自带的list去处理数组效率很低, numpy就诞生了, 它提供了ndarry对象,N-dimensional object, 是存储单一数据类型的多维数组,即所有的元素都是同一种类型. ...
OptionParser
给个例子: from optparse import OptionParser msg_usage = 'usage: %prog [-W] windows size [-H] h island si ...
Java线程的生命周期
线程的生命周期包括:新建(New).就绪(Runnable).运行(Running).阻塞(Blocked)和死亡(Dead)5种状态.线程状态转换图如下: 1.新建状态(New) 当程序使用new关 ...
man page的介绍
假设你知道一个命令名,但不知其使用方法,此时可以求助于在线求助系统,即使用man(manual)命令,如man date. 上图为执行man date语句后的结果.<翻页查看时可按空格键,退出m ...
DEF2015丨腾讯优测携专业云测试服务，亮相中国（成都）数字娱乐节
近年来,随着APP的大量涌出,“软件质量保证”这个话题又被拉进了人们的视野.作为备受用户信赖的移动云测试平台,腾讯优测受邀参加11月19日-21日由GMGC主办的中国(成都)数字娱乐节(简称DEF20 ...
AndroidStudio用微信官方方法接入微信分享功能
转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...
前后台Json的转换
jsp:JSON.stringify(params):params:表示数组 servlet:Store store = (Store) JSONObject.toBean(JSONObject.fr ...
Codeforces Round #137 (Div. 2)
A. Shooshuns and Sequence 显然$[k,n]$之间所有数均要相同,为了求最少步数,即最多模拟$n$次操作即可. B. Cosmic Tables 映射\(x_i,y_i ...

(转)用JQuery实现Fix表头表格

(转)用JQuery实现Fix表头表格的更多相关文章

随机推荐

热门专题