首页 > 代码库 > 表头固定

表头固定

<!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>

  

表头固定