如何让table 表头随着滚动条滚动？ 达到覆盖效果。 JS 、JQ大神求帮忙。

Posted 2023-05-10

如何让table 表头随着滚动条滚动？就行Excel的冻结表头那样。 求代码。 需求如图。

蓝色的那块是表头。

滚动条往下拉一格。表头继续覆盖了第二格。(我的表格高是40px.意思是说每次滚动条移动40px)

意思就是说要让表头跟随滚动条的移动并覆盖表格。
和Excel里面固定的表头 一样

建议用DIV代替表头，直接用table的话可能不行，楼下说的对就是用fixed，但是不是一上来就用fixed而是等到你的表格头部到浏览器顶端的时候才用fixed，去百度一下JS或则JQ的吸顶效果吧~会有你想要的~追问

谢谢

追答

你竟然选了上面的答案……真无语了……好吧好吧~

参考技术A 将头的CSS设置成fixed,并固定位置,z-index设置大些追问

我试过了。
position:fixed; top:0;
但是表头的顶部还有东西....
用不了这个。 有JS或者JQ的代码吗？

追答

表头的顶部还有东西
那就是整个页面滚动了啊. 如果要做这个效果. 你要让table内的tr滚动, 在表头做遮盖

本回答被提问者采纳

让table表头固定，tr超出指定条数后无缝上下循环滚动jquery效果代码

使用的时候引用一下jquery.js

具体代码如下：

<div class="tablebox clearfix">
                    <table id="tableId" class="cui-table tbg" border="0" cellspacing="0" cellpadding="0" style="word-wrap: break-word; word-break: break-all;">
                        <thead>
                            <tr>
                                <th style="width: 60px;">交易分类</th>
                                <th>项目名称</th>
                                <th style="width: 60px;">开标时间</th>
                                <th style="width: 150px;">评标室</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">08:30</td>
                                <td class="tac">第三开标室（重庆市）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">08:40</td>
                                <td class="tac">第二开标室</td>
                            </tr>
                    
                            <tr>
                                <td>工程建设</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第一开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第一开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目（二次）</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第二开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第二开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:30</td>
                                <td class="tac">第三开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:30</td>
                                <td class="tac">第一开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">10:00</td>
                                <td class="tac">第二开标室（重庆）</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目(二次)</td>
                                <td class="tac">10:30</td>
                                <td class="tac">第三开标室（重庆）</td>
                            </tr>
                        </tbody>
                    </table>

                        <script>
                        // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
                        tableScroll(‘tableId‘, 400, 30, 6)
                        var MyMarhq;
                        
                        function tableScroll(tableid, hei, speed, len) {
                            clearTimeout(MyMarhq);
                            $(‘#‘ + tableid).parent().find(‘.tableid_‘).remove()
                            $(‘#‘ + tableid).parent().prepend(
                                ‘<table class="tableid_ cui-table tbg"><thead>‘ + $(‘#‘ + tableid + ‘ thead‘).html() + ‘</thead></table>‘
                            ).css({
                                ‘position‘: ‘relative‘,
                                ‘overflow‘: ‘hidden‘,
                                ‘height‘: hei + ‘px‘
                            })
                            $(".tableid_").find(‘th‘).each(function(i) {
                                $(this).css(‘width‘, $(‘#‘ + tableid).find(‘th:eq(‘ + i + ‘)‘).width());
                            });
                            $(".tableid_").css({
                                ‘position‘: ‘absolute‘,
                                ‘top‘: 0,
                                ‘left‘: 0,
                                ‘z-index‘: 9
                            })
                            $(‘#‘ + tableid).css({
                                ‘position‘: ‘absolute‘,
                                ‘top‘: 0,
                                ‘left‘: 0,
                                ‘z-index‘: 1
                            })
                        
                            if ($(‘#‘ + tableid).find(‘tbody tr‘).length > len) {
                                $(‘#‘ + tableid).find(‘tbody‘).html($(‘#‘ + tableid).find(‘tbody‘).html() + $(‘#‘ + tableid).find(‘tbody‘).html());
                                $(".tableid_").css(‘top‘, 0);
                                $(‘#‘ + tableid).css(‘top‘, 0);
                                var tblTop = 0;
                                var outerHeight = $(‘#‘ + tableid).find(‘tbody‘).find("tr").outerHeight();
                        
                                function Marqueehq() {
                                    if (tblTop <= -outerHeight * $(‘#‘ + tableid).find(‘tbody‘).find("tr").length) {
                                        tblTop = 0;
                                    } else {
                                        tblTop -= 1;
                                    }
                                    $(‘#‘ + tableid).css(‘margin-top‘, tblTop + ‘px‘);
                                    clearTimeout(MyMarhq);
                                    MyMarhq = setTimeout(function() {
                                        Marqueehq()
                                    }, speed);
                                }
                        
                                MyMarhq = setTimeout(Marqueehq, speed);
                                $(‘#‘ + tableid).find(‘tbody‘).hover(function() {
                                    clearTimeout(MyMarhq);
                                }, function() {
                                    clearTimeout(MyMarhq);
                                    if ($(‘#‘ + tableid).find(‘tbody tr‘).length > len) {
                                        MyMarhq = setTimeout(Marqueehq, speed);
                                    }
                                })
                            }
                        
                        }
                        </script>
                    </div>