头像

固定table表头 jquery插件 TableHeadFixer Fix Header

来源:https://www.daimasucai.com/share/22.html 2017-08-23浏览(81)  评论0

html表格,顶栏和侧栏固定不动,如何实现


<html>

                <head>

                <script src="../assets/jquery-2.1.3.js"></script>

                <script src="../tableHeadFixer.js"></script>

                <link rel="stylesheet" href="../assets/bootstrap-3.3.2/css/bootstrap.css">

                <style>

                #parent {

                height: 300px;

                }

                </style>



                <script>

                $(document).ready(function() {

                $("#fixTable").tableHeadFixer();

                });

                </script>

                </head>



                <body>

                <h2>TableHeadFixer Fix Header</h2>



                <div id="parent">

                <table id="fixTable" class="table">

                <thead>

                <tr>

                <th>Ano</th>

                <th>Jan</th>

                <th>Fev</th>

                <th>Mar</th>

                <th>Abr</th>

                <th>Maio</th>

                <th>Total</th>

                </tr>

                </thead>

                <tbody>

                <tr>

                <td>2010</td>

                <td>100.00</td>

                <td>100.00</td>

                <td>100.00</td>

                <td>100.00</td>

                <td>100.00</td>

                <td>500.00</td>

                </tr>

                <tr>

                <td>2011</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                <tr>

                <td>2012</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>110.00</td>

                <td>550.00</td>

                </tr>

                </tbody>

                </table>

                </div>

                </body>

</html>

附件下载:http://www.yun-hua.net/TableHeadFixer.zip

声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/share/22.html

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>