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