首页 > 代码库 > 头部固定的table

头部固定的table

2024-08-29 02:52:27   217人阅读

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>头部固定table</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width"/>

        <style>
            div,
            table{
                margin:0;
                padding:0;
            }
            table{
                border-collapse:collapse;
                border-spacing:0;
            }
            .m-tb-fit{
                position: relative;
                table-layout: fixed;
                line-height: 1.5;
            }
            .m-tb-fit th,
            .m-tb-fit td{
                padding: 5px;
                border: 1px solid #ddd;
            }
            .g-w600{
                width: 600px;
            }
            .g-tb-fit{
                width: 300px;
                height: 500px;
                overflow: hidden;
            }
            .g-tb-fit .g-tb-cont{
                position: relative;
                top: -1px;
                overflow: auto;
                height: 200px;
            }
        </style>

    </head>
    <body>

        <div class="g-tb-fit">
            <table class="m-tb-fit hd g-w600">
                <thead>
                    <tr>
                        <th width="90">1</th>
                        <th width="90">22</th>
                        <th width="90">333</th>
                        <th width="90">4444</th>
                        <th width="90">55555</th>
                        <th>666666</th>
                    </tr>
                </thead>
            </table>
            <div class="g-tb-cont">
                <table class="m-tb-fit g-w600">
                    <tbody>
                        <tr>
                            <td width="90">111111</td>
                            <td width="90">22222</td>
                            <td width="90">3333</td>
                            <td width="90">444</td>
                            <td width="90">55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>111111</td>
                            <td>22222</td>
                            <td>3333</td>
                            <td>444</td>
                            <td>55</td>
                            <td>6</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            function tabFitScroll(box, hd, cont) {
                var _tb_box = box,
                        _tb_hd = hd,
                        _tb_cont = cont;
                $(_tb_box + ‘ ‘ + _tb_cont).scroll(function () {
                    var $t = $(this);
                    $(_tb_box + ‘ ‘ + _tb_hd).css(‘left‘, -$t.scrollLeft());
                });
            }
            $(function () {
                tabFitScroll(‘.g-tb-fit‘, ‘.m-tb-fit.hd‘, ‘.g-tb-cont‘);
            });
        </script>
    </body>
</html>

　　

头部固定的table


联系
我们