需求是表头绝对定位 body滚动 可是直接在bootstarp表头上设置fix就对不上 解决办法就是写两个表头覆盖 css
<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的宽度加上html
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)
最后在页面加载以后spa
window.onload = function(){ //页面加载完毕,表头表的自适应宽度 autoWidth(); }