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

      

      

  • 相关阅读:
    CoreBluetooth
    IOS Monkey 测试
    Ruby+appium实现截图、滑屏、长按、日志输出到本地文件夹
    maven中GroupID 和ArtifactID怎么写
    MAC安装Eclipse及对其进入相关配置
    单元测试断言利器 AssertJ
    python+appium app自动化的方法实例运用
    美团接口自动化测试实践
    appium滑动操作总结
    Appium+python自动化-Appium Python API
  • 原文地址:https://www.cnblogs.com/smallteeth/p/8022622.html
Copyright © 2020-2023  润新知