• css 表单头部固定


    原创 https://blog.csdn.net/q3585914/article/details/69946478

    table表头和首列的表格固定-CSS实现的Table表头固定

    原创 2017年04月10日 14:06:21

    这里写图片描述

    效果就是上图 表头是固定的, 
    跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动 
    下面是代码原文是查看

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="jack">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,
            user-scalable=no" />
    <!-- 适应手机屏幕,防止屏幕缩放 -->
    
    <!--样式-->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    </head>
    
    <body>
    <title>固定表头和首列的表格</title>
    <style type="text/css">
    #left_div{
        100px;
        float: left;
    }
    #left_div1{
         100%;
    }
    #left_div2{
        margin-top:-20px;
         100%;
        height: 400px;
        overflow: hidden;
    }
    #left_table1 th{
        background: #E9F8FF;
        text-align:center;
    }
    #left_table2 th{
        text-align:center;
    }
    
    #right_div{
        float: left;
    }
    #right_div1{
         100%;
        overflow: hidden;
    }
    #right_divx{
         900px;
    }
    #right_div2{
        margin-top:-20px;
        100%;
        height:400px;
        overflow: auto;
    }
    #right_table1{
         880px;
    }
    #right_table2{
        /**width和max-width一起写,手机浏览器打开也能固定长度**/
         880px;
        max- 880px;
        white-space:nowrap;
    }
    #right_table1 th{
        background: #E9F8FF;
        text-align:center;
        10%;
    }
    #right_table2 td{
        10%;
        text-align:center;
    }
    
    </style>
    <div class="container-fluid">
      <div id="left_div">
        <div id="left_div1">
          <table id="left_table1" class="table table-bordered">
            <tr>
              <th>我不会动</th>
            </tr>
          </table>
        </div>
        <div id="left_div2">
          <table id="left_table2" class="table table-bordered">
          </table>
        </div>
      </div>
      <div id="right_div">
        <div id="right_div1">
          <div id="right_divx">
            <table id="right_table1" class="table table-bordered">
              <tr>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
              </tr>
            </table>
          </div>
        </div>
        <div id="right_div2">
          <table id="right_table2" class="table table-bordered">
          </table>
        </div>
      </div>
    </div>
    
    <!--脚本--> 
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
    <script src="./bootstrap.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
    
    //固定和滚动
    var right_div2 = document.getElementById("right_div2");
    right_div2.onscroll = function(){
        var right_div2_top = this.scrollTop;
        var right_div2_left = this.scrollLeft;
        document.getElementById("left_div2").scrollTop = right_div2_top;
        document.getElementById("right_div1").scrollLeft = right_div2_left;
    }
    //设置右边div宽度
    document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";  
    setInterval(function() {
        document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";  
    }, 0);
    
    for(var i=0;i<24;i++){
        $("#left_table2").append("<tr><th>我是首列</th></tr>");
        $("#right_table2").append("<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>");
    }
    
    </script>
    </body>
    </html>

    这句js 不要忘记加了

    var right_div2 = document.getElementById("right_div2");
    right_div2.onscroll = function(){
        var right_div2_top = this.scrollTop;
        var right_div2_left = this.scrollLeft;
        document.getElementById("left_div2").scrollTop = right_div2_top;
        document.getElementById("right_div1").scrollLeft = right_div2_left;
    }
    //设置右边div宽度
    document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";  
    setInterval(function() {
        document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";  
    }, 0);

    如果你遇到问题,可以加群315552185 
    一起交流哦!

  • 相关阅读:
    使用数据库时注意单引号、双引号和反引号的区别
    Mysql中的事件
    C#使用WindowsMediaPlayer实现视频播放
    Chart控件,鼠标选择区域,可以局部放大缩小
    C#自定义控件在添加引用后不显示在工具箱的解决方法(转)
    C# 中的#if、#elif、#else、#endif等条件编译符号
    若有派生类,则基类中的析构函数要用虚函数
    迭代器失效
    this指针
    VS调试快捷键
  • 原文地址:https://www.cnblogs.com/limit1/p/8744979.html
Copyright © 2020-2023  润新知