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

最新推荐文章于 2024-07-08 16:22:29 发布

weixin_34392435

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量102

点赞数

文章标签： javascript ViewUI

本文转载自：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>

weixin_34392435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(转)用JQuery实现Fix表头表格

本文转载自：http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html我的技术要点：　　１、用两个表，其中一个是表头，另一个是表格做表体　　２、两个表格使用相同的百分比宽度　　３、在IE下，如果列溢出，则采用　...　来表示溢出，FF下自动隐藏　　４、采用JQuery，把表头的列宽，设置到表体第一列。　　５、在窗体大小改变时，自...
复制链接

扫一扫