zoukankan      html  css  js  c++  java
  • 固定table表格头部

    js:

    // Code goes here
    'use strict'
    window.onload = function(){
      var tableCont = document.querySelector('#table-cont')
      /**
       * scroll handle
       * @param {event} e -- scroll event
       */
      function scrollHandle (e){
        console.log(this)
        var scrollTop = this.scrollTop;
        this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
      }
    
      tableCont.addEventListener('scroll',scrollHandle)
    }

    css:

    /* Styles go here */
    
    .table-cont{
      /**make table can scroll**/
      max-height: 200px;
      overflow: auto;
      /** add some style**/
      /*padding: 2px;*/
      background: #ddd;
      margin: 20px 10px;
      box-shadow: 0 0 1px 3px #ddd;
    }
    thead{
      background-color: #ddd;
    }

    html:

    <!DOCTYPE html>
    <html>
    
      <head>
        <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>
    
      <body>
      <div class='table-cont' id='table-cont'><!--看这里-->
    
       <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
      </body>
    
    </html>

    https://blog.csdn.net/weixiangzhe/article/details/59108514

  • 相关阅读:
    linux nat style
    vmware tools install
    linux network
    sql group by max
    实例 | tp5使用七牛云上传图片和文件/删除文件
    菜鸟如何使用composer
    浅谈数据库用户表结构设计,第三方登录
    app登陆,注册,第三方登陆数据设计及业务流程
    数据库设计——评论回复功能
    app接口设计之token的php实现
  • 原文地址:https://www.cnblogs.com/Rookie-upgrade/p/9316567.html
Copyright © 2011-2022 走看看