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(); 
        }