zoukankan      html  css  js  c++  java
  • css表格固定表头和左边栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>my-vue</title>
      <style>
        #app {
           600px;
          height: 300px;
          overflow: auto;
        }
    
        table {
           1200px;
          height: 600px;
        }
    
        table td {
          border: 1px solid black;
        }
    
        table > thead > tr > td {
          background-color: green;
          position: sticky;
          top: 0;
          z-index: 1;
        }
    
        table > tbody > tr > td:nth-of-type(1) {
          background-color: red;
          position: sticky;
          left: 0;
        }
      </style>
    </head>
    <body>
    <div id="app" onscroll="stickyscroll(this)">
      <table cellspacing="0">
        <thead>
        <tr>
          <td rowspan="2" style=" 100px;">123</td>
          <td rowspan="2">123</td>
          <td colspan="2">123</td>
          <td colspan="2" class="getstickyscrollheight">123</td>
        </tr>
        <tr class="setstickyscrollheight">
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        </tbody>
      </table>
    </div>
    <script>
      function stickyscroll(ele) {
        ele.querySelectorAll(".setstickyscrollheight>td").forEach(li => {
          li.style.top = ele.querySelector(".getstickyscrollheight").offsetHeight + "px"
        })
      }
    </script>
    </body>
    </html>
  • 相关阅读:
    面试题_day0212
    面试题_day0211
    猫眼的数字解密
    缺口验证码
    mysql替换字段里面的内容
    mysql重复id删除
    追踪你的女朋友。
    淘宝登录验证
    jadx-gui-1.0.0.jar怎么运行?
    Python实现一个进度条
  • 原文地址:https://www.cnblogs.com/linding/p/14710306.html
Copyright © 2011-2022 走看看