bootstarp 表头绝对定位

需求是表头绝对定位 body滚动 但是直接在bootstarp表头上设置fix就对不上  解决办法就是写两个表头覆盖 

<table class="table table-striped fixedhead" id="fixedhead">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>散客</th>
                    <th>OTA</th>
                    <th>团体</th>
                    <th>年卡</th>
                </tr>
            </thead>
        </table>
<table class="table table-striped" id="user_table">
        <thead>
            <tr>
                <th>日期</th>
                <th>散客</th>
                <th>OTA</th>
                <th>团体</th>
                <th>年卡</th>
            </tr>
        </thead>
        

            <tbody id='phoneTbody'>

            </tbody>  

    </table>

  两个html表格都是一样的  想达到目的表头固定的目的就是要把 上面的表格固定住下面的表格顶上去 就是类似这种 表头固定 下面滚动的效果 但是还需要判断下面tbody中td的宽度给上面td的宽度加上

function autoWidth() {
            $('#fixedhead').css({'width': $('#user_table').css({'width')})
            console.log($('#fixedhead').find('th'));
            $('#fixedhead').find('th').each(function(i,v){
                $(v).css({'width':$($('#user_table').find('th')[i]).css('width')})
            })
        }

  然后在窗口重新计算的时候调用  在初始化完成后调用  这是我一般用的rem布局的初始化代码

(function (window) {
            var docEl = document.documentElement
            var h

            function setUnitA() {
                var boundingWidth = docEl.getBoundingClientRect().width
                boundingWidth = boundingWidth > 640 ? 640 : boundingWidth
                window.rem = boundingWidth / 10.35
                docEl.style.fontSize = window.rem + 'px'
            }

            window.addEventListener('resize', function () {
                autoWidth()
                clearTimeout(h)
                h = setTimeout(function () {
                    setUnitA()
                }, 300)
            }, false)

            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    clearTimeout(h)
                    h = setTimeout(function () {
                        setUnitA()
                    }, 300)
                }
            }, false)

            setUnitA()

        })(window)

       最后在页面加载之后

window.onload = function(){
            //页面加载完毕,表头表的自适应宽度
            autoWidth(); 
        }

  

  

原文地址:https://www.cnblogs.com/smallteeth/p/8022622.html