table表头thead固定

<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script type="text/javascript" src="js/jquery.freezeheader.js"></script>
        <style type="text/css">
            table{width: 100%; border-collapse:collapse; text-align: center;}
            table thead{background-color: #CCCCCC;}
            table tr td{border:1px solid red;  }
        </style>
    </head>
<body>
    <table id="mytable">
        <thead>
            <tr>
                <td>表头1</td>   <td>表头2</td>  <td>表头3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>   <td>2</td>  <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>   <td>总计</td>  <td>总计</td>
            </tr>
        </tfoot>
    </table>
     <script>
     //不要问我为啥js生成，因为一个一个写，难看还慢
        for (var i=0; i<20; i++) {
            $("tbody").append($("tbody tr:first").clone())
        }
    //锁定头部
    $("#mytable").freezeHeader({ 'height': '300px' });

     </script>
</body>
</html>

源码展示>>