js表格冻结列滚动条同步滚动

谁践踏了优雅 2023-06-20 06:09 86阅读 0赞

用div css写的table表格怎么实现冻结某列，同时实现数据滚动条滚动的时候，表头也跟着滚动呢？

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.     .fixed-table-box {
  7.         display: flex;
  8.         margin-top: 20px;
  9.         margin-left: 200px;
  10.         width: 800px;
  11.         flex-direction: column;
  12.         flex-shrink: 0;
  13.         flex-grow: 7;
  14.         flex-direction: column;
  15.         position: relative;
  16.     }
  17.     .fixed-table_fixed-left {
  18.         display: flex;
  19.         flex-shrink: 0;
  20.         flex-direction: column;
  21.         flex-grow: 1;
  22.         width: 120px;
  23.         position: absolute;
  24.         top: 0;
  25.         left: 0;
  26.         z-index: 5;
  27.         overflow: hidden;
  28.         background: white;
  29.         box-shadow: 4px 0px 8px -1px #d3d4d6;
  30.     }
  31.     .fixed-table_fixed-right {
  32.         display: flex;
  33.         flex-shrink: 0;
  34.         flex-grow: 1;
  35.         flex-direction: column;
  36.         width: 132px;
  37.         overflow: hidden;
  38.         position: absolute;
  39.         top: 0;
  40.         right: 15px;
  41.         z-index: 5;
  42.         background: white;
  43.         box-shadow: -4px 0px 8px -1px #d3d4d6;
  44.     }
  45.     .fixed-table-box_fixed-right-patch {
  46.         width: 15px;
  47.         height: 28px;
  48.         border-top: 1px solid #4078b7;
  49.         border-bottom: 1px solid #4078b7;
  50.         background-color: #eef1f6;
  51.         position: absolute;
  52.         top: 0;
  53.         right: 0;
  54.     }
  55.     .fixed-table_header {
  56.         display: flex;
  57.         height: 30px;
  58.         line-height: 30px;
  59.         width: 800px;
  60.         flex-shrink: 0;
  61.         overflow: hidden;
  62.     }
  63.     .fixed-table_header_th {
  64.         display: flex;
  65.         flex-grow: 1;
  66.         border-top: 1px solid #4078b7;
  67.         border-bottom: 1px solid #4078b7;
  68.         background-color: #eef1f6;
  69.         width: 120px;
  70.         padding-left: 10px;
  71.         flex-shrink: 0;
  72.     }
  73.     .column-scrollbar {
  74.         width: 10px !important;
  75.     }
  76.     .fixed-table_body {
  77.         display: flex;
  78.         flex-direction: column;
  79.         max-height: 197px;
  80.         width: 800px;
  81.         overflow: auto;
  82.     }
  83.     .fixed-table-left_body,.fixed-table-right_body {
  84.         max-height: 180px;
  85.     }
  86.     .fixed-table_body_tr {
  87.         display: flex;
  88.         height: 30px;
  89.         line-height: 30px;
  90.         flex-shrink: 0;
  91.     }
  92.     .fixed-table_body_td {
  93.         display: flex;
  94.         flex-grow: 0;
  95.         height: 30px;
  96.         line-height: 30px;
  97.         border-bottom: 1px solid #4078b7;
  98.         width: 120px;
  99.         flex-shrink: 0;
  100.         padding-left: 10px;
  101.     }
  102.     .column-address {
  103.         width: 240px;
  104.     }
  105.     </style>
  106. </head>
  108. <body>
  109.     <div class="fixed-table-box">
  110.         <div id="fixed-table-main_header" class="fixed-table_header">
  111.             <div class="fixed-table_header_th">日期</div>
  112.             <div class="fixed-table_header_th">姓名</div>
  113.             <div class="fixed-table_header_th">省份</div>
  114.             <div class="fixed-table_header_th">市区</div>
  115.             <div class="fixed-table_header_th column-address">地址</div>
  116.             <div class="fixed-table_header_th">邮编</div>
  117.             <div class="fixed-table_header_th">操作</div>
  118.             <div class="fixed-table_header_th column-scrollbar"></div>
  119.         </div>
  120.         <div onscroll="scroll(event)" class="fixed-table_body">
  121.             <div class="fixed-table_body_tr">
  122.                 <div class="fixed-table_body_td">2016-05-03</div>
  123.                 <div class="fixed-table_body_td">王小虎</div>
  124.                 <div class="fixed-table_body_td">上海</div>
  125.                 <div class="fixed-table_body_td">普陀区</div>
  126.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  127.                 <div class="fixed-table_body_td">200333</div>
  128.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  129.             </div>
  130.             <div class="fixed-table_body_tr">
  131.                 <div class="fixed-table_body_td">2016-05-03</div>
  132.                 <div class="fixed-table_body_td">王小虎</div>
  133.                 <div class="fixed-table_body_td">上海</div>
  134.                 <div class="fixed-table_body_td">普陀区</div>
  135.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  136.                 <div class="fixed-table_body_td">200333</div>
  137.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  138.             </div>
  139.             <div class="fixed-table_body_tr">
  140.                 <div class="fixed-table_body_td">2016-05-03</div>
  141.                 <div class="fixed-table_body_td">王小虎</div>
  142.                 <div class="fixed-table_body_td">上海</div>
  143.                 <div class="fixed-table_body_td">普陀区</div>
  144.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  145.                 <div class="fixed-table_body_td">200333</div>
  146.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  147.             </div>
  148.             <div class="fixed-table_body_tr">
  149.                 <div class="fixed-table_body_td">2016-05-03</div>
  150.                 <div class="fixed-table_body_td">王小虎</div>
  151.                 <div class="fixed-table_body_td">上海</div>
  152.                 <div class="fixed-table_body_td">普陀区</div>
  153.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  154.                 <div class="fixed-table_body_td">200333</div>
  155.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  156.             </div>
  157.             <div class="fixed-table_body_tr">
  158.                 <div class="fixed-table_body_td">2016-05-03</div>
  159.                 <div class="fixed-table_body_td">王小虎</div>
  160.                 <div class="fixed-table_body_td">上海</div>
  161.                 <div class="fixed-table_body_td">普陀区</div>
  162.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  163.                 <div class="fixed-table_body_td">200333</div>
  164.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  165.             </div>
  166.             <div class="fixed-table_body_tr">
  167.                 <div class="fixed-table_body_td">2016-05-03</div>
  168.                 <div class="fixed-table_body_td">王小虎</div>
  169.                 <div class="fixed-table_body_td">上海</div>
  170.                 <div class="fixed-table_body_td">普陀区</div>
  171.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  172.                 <div class="fixed-table_body_td">200333</div>
  173.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  174.             </div>
  175.             <div class="fixed-table_body_tr">
  176.                 <div class="fixed-table_body_td">2016-05-03</div>
  177.                 <div class="fixed-table_body_td">王小虎</div>
  178.                 <div class="fixed-table_body_td">上海</div>
  179.                 <div class="fixed-table_body_td">普陀区</div>
  180.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  181.                 <div class="fixed-table_body_td">200333</div>
  182.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  183.             </div>
  184.             <div class="fixed-table_body_tr">
  185.                 <div class="fixed-table_body_td">2016-05-03</div>
  186.                 <div class="fixed-table_body_td">王小虎</div>
  187.                 <div class="fixed-table_body_td">上海</div>
  188.                 <div class="fixed-table_body_td">普陀区</div>
  189.                 <div class="fixed-table_body_td column-address">上海市普陀区金沙江路 1518 路</div>
  190.                 <div class="fixed-table_body_td">200333</div>
  191.                 <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  192.             </div>
  193.         </div>
  194.         <div class="fixed-table_fixed-left">
  195.             <div class="fixed-table_header">
  196.                 <div class="fixed-table_header_th">日期</div>
  197.             </div>
  198.             <div class="fixed-table_body fixed-table-left_body">
  199.                 <div class="fixed-table_body_tr">
  200.                     <div class="fixed-table_body_td">2016-05-03</div>
  201.                 </div>
  202.                 <div class="fixed-table_body_tr">
  203.                     <div class="fixed-table_body_td">2016-05-04</div>
  204.                 </div>
  205.                 <div class="fixed-table_body_tr">
  206.                     <div class="fixed-table_body_td">2016-05-05</div>
  207.                 </div>
  208.                 <div class="fixed-table_body_tr">
  209.                     <div class="fixed-table_body_td">2016-05-06</div>
  210.                 </div>
  211.                 <div class="fixed-table_body_tr">
  212.                     <div class="fixed-table_body_td">2016-05-07</div>
  213.                 </div>
  214.                 <div class="fixed-table_body_tr">
  215.                     <div class="fixed-table_body_td">2016-05-08</div>
  216.                 </div>
  217.                 <div class="fixed-table_body_tr">
  218.                     <div class="fixed-table_body_td">2016-05-09</div>
  219.                 </div>
  220.                 <div class="fixed-table_body_tr">
  221.                     <div class="fixed-table_body_td">2016-05-10</div>
  222.                 </div>
  223.             </div>
  224.         </div>
  225.         <div class="fixed-table_fixed-right">
  226.             <div class="fixed-table_header">
  227.                 <div class="fixed-table_header_th">操作</div>
  228.             </div>
  229.             <div class="fixed-table_body fixed-table-right_body">
  230.                 <div class="fixed-table_body_tr">
  231.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  232.                 </div>
  233.                 <div class="fixed-table_body_tr">
  234.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  235.                 </div>
  236.                 <div class="fixed-table_body_tr">
  237.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  238.                 </div>
  239.                 <div class="fixed-table_body_tr">
  240.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  241.                 </div>
  242.                 <div class="fixed-table_body_tr">
  243.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  244.                 </div>
  245.                 <div class="fixed-table_body_tr">
  246.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  247.                 </div>
  248.                 <div class="fixed-table_body_tr">
  249.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  250.                 </div>
  251.                 <div class="fixed-table_body_tr">
  252.                     <div class="fixed-table_body_td"><a href="###">编辑</a> <a href="###">删除</a></div>
  253.                 </div>
  254.             </div>
  255.         </div>
  256.         <div class="fixed-table-box_fixed-right-patch"></div>
  257.     </div>
  259.     <script type="text/javascript">
  260.         //固定和滚动
  261.         function scroll(event) {
  262.         var mainHeader = document.querySelector("#fixed-table-main_header");
  263.         var fixedLeft = document.querySelector(".fixed-table-left_body");
  264.         var fixedRight = document.querySelector(".fixed-table-right_body");
  265.             var mainTop = event.target.scrollTop;
  266.             var mainLeft = event.target.scrollLeft;
  267.             mainHeader.scrollLeft = mainLeft;
  268.             fixedLeft.scrollTop = mainTop;
  269.             console.log(mainTop);
  270.             fixedRight.scrollTop = mainTop;
  271.         }
  272.     </script>
  273. </body>
  274. </html>

原理：

首先，冻结列是将要冻结的列单独做成一个table然后覆盖在原来的table上。

然后，同步滚动则就是通过οnscrοll=”scroll(event)”方法，读取横向和纵向滚动距离，然后赋给表头和冻结列即可。

发表评论

表情：
评论列表 （有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读