html表格固定表头

1、CSS部分

?

1 2 3 4 5 6 7 8

.fix-head-control {            z-index: 100;            position: fixed;        }          .invisible {            visibility: hidden;        }

2、js部分

<script type="text/javascript">
        
        $(function() {
            appendTableFixHead();
        });

        window.onresize = initFixTableHeadSize;
        function initFixTableHeadSize() {
            $('table.grid[type="head"]').css("width", $('table.grid[type="data"]').css("width"));
            var headTds = $('table.grid[type="data"] tbody>tr:eq(0)').children();
            var fixHeadTds = $('table.grid[type="head"] tbody>tr:eq(0)').children();
            for (var i = 0; i < headTds.length; i++) {
                $(fixHeadTds[i]).width($(headTds[i]).width());
            }
        }
        function appendTableFixHead() {
            var headTr = $('table.grid[type="data"] tbody>tr:eq(0)');
            var headTable = '<table width="100%" class="grid fix-head-control invisible" type="head" style="top: 0px;"><tbody><tr>';
            headTable += headTr.html() + "</tr></tbody></table>";

            $('table.grid[type="data"]').before(headTable);

            initFixTableHeadSize();
            headFixed($('table.grid[type="data"]'), -5);
            
        }

        function headFixed($table, headMarginTop) {
            if (headMarginTop === undefined) {
                headMarginTop =0;
            }
            $(window).scroll(function () {
                var $target = $('table.grid[type="head"]');
                $target.css('left', 0 - $(window).scrollLeft() + $table.offset().left);
                var topDis = $table.offset().top - $(window).scrollTop();
                if (topDis < headMarginTop) {
                    $target.removeClass('invisible');
                    $target.css('top', headMarginTop + 'px');
                } else {
                    $target.css('top', 0);
                    $target.addClass('invisible');
                }
            });
        }
    </script>

3、html部分

<table class='grid' type='data'>
  <tbody>
     <tr></tr>
     <tr></tr>
     ...
  </tbody>
</table>