Javascript 可水平和垂直滚动的大表格

Javascript 可水平和垂直滚动的大表格,javascript,html,css,html-table,scroll,Javascript,Html,Css,Html Table,Scroll,好了,这是关于固定页眉和页脚的无聊滚动表的下一篇文章。本主题来源于HTML的刚性结构。问题的根源是显示非常巨大的表格,其屏幕宽度与高度一样。我的愿望也是将标题固定在表格的顶部,将其副本固定在表格的底部 在大量搜索和测试保证代码后,我发现了下一个深层嵌套问题: -页眉和页脚不保留表体的单元格间距,而tbody单独滚动 -tbody行覆盖标题 -tbody的垂直滚动很难与整个表(包括页眉和页脚)的水平滚动相结合 我开始写一些黑客来克服它,但这也取决于使用的浏览器 pokusvar选项卡= [{“id

好了,这是关于固定页眉和页脚的无聊滚动表的下一篇文章。本主题来源于HTML的刚性结构。问题的根源是显示非常巨大的表格,其屏幕宽度与高度一样。我的愿望也是将标题固定在表格的顶部,将其副本固定在表格的底部

在大量搜索和测试保证代码后,我发现了下一个深层嵌套问题: -页眉和页脚不保留表体的单元格间距,而tbody单独滚动 -tbody行覆盖标题 -tbody的垂直滚动很难与整个表(包括页眉和页脚)的水平滚动相结合

我开始写一些黑客来克服它,但这也取决于使用的浏览器

pokusvar选项卡=
[{“id”:“1”,“uuid”:“b25202a1-c732-f5e4-c976-f725092a9f02”,“计数”:“19622”,“哈希”:“fddf1277943af21b9282bd6a4ff53bc19168854e”,“差异”:“151621”,“时间戳”:“2017-08-23 14:31:26”,“速度”:“29553600”}
,{“id”:“2”,“uuid”:“ade0f2a7-6838-d1f3-646c-7c238a9383a9”,“计数”:“24794”,“哈希”:“2b52c53b1775c7729d873db22d23adc38d13c99f”,“差异”:“151622”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“29685192”}
,{“id”:“3”,“uuid”:“1040a7f3-aee2-69cd-7be8-97683c1dd406”,“计数”:“64495”,“哈希”:“585421d85d3bc6f068cb1b0da2a3587f585bdd9e”,“差异”:“151623”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“51766808”}
,{“id”:“4”,“uuid”:“f2bc0ef7-bc05-d425-1b73-451ba5b08011”,“计数”:“71693”,“哈希”:“150c32da8771141b1d3ed4725389ee3496d6218f”,“差异”:“151624”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“53923592”}
,{“id”:“5”,“uuid”:“763153c1-ce21-db34-f98a-7034575CE0”,“计数”:“92657”,“哈希”:“db82a3cfc601db58d0a41f9928e371dfe40067fa”,“差异”:“151625”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“29923912”}
,{“id”:“6”,“uuid”:“ddf160de-a052-7404-cfcc-36605c5a01ce”,“计数”:“57471”,“哈希”:“8edc173bb8e9cc89f0525e59bfa17c486aefd9d9”,“差异”:“151626”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“53787840”}
,{“id”:“7”,“uuid”:“3aa65601-7834-a62e-fe5d-fbd0b4e703c7”,“计数”:“79016”,“哈希”:“0f8c4ce07af5730c60550d64e3160950bd1994e0”,“差异”:“151627”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“20422664”}
,{“id”:“8”,“uuid”:“16bee402-b87d-8172-daf3-f918b0d9f2ff”,“count”:“8929”,“hash”:“ec563d631f981a5770dea4bf7390b79eb3e649ce”,“diff”:“151628”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“43552496”}
,{“id”:“9”,“uuid”:“3b1b3e69-0ad0-4c9c-f786-ca6fc30c6f65”,“计数”:“9863”,“哈希”:“89C20F552FB74461C67BA9A3BC13EC8B66BF6B3”,“差异”:“151531”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“272836232”}
,{“id”:“10”,“uuid”:“b64d86b0-fcab-2120-18cc-a6efaabbafe0”,“计数”:“2893”,“哈希”:“E0FB5A4DA9F7804E8D7C51F3F1C49F17E21E45A”,“差异”:“151658”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“35025144”}
,{“id”:“11”,“uuid”:“df8dd8bd-c9df-a8fc-977e-0f89c6a2e017”,“计数”:“9952”,“哈希”:“1f89b65e230f0525ea41b27b7e3548daedb5b1a8”,“差异”:“151532”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“27441184”}
,{“id”:“12”,“uuid”:“53f39083-5999-dddf-30e2-4B53D1BF3BF3FA4”,“计数”:“346”,“哈希”:“EB7F5723B9ED7239ECBF951EA51B38927C29B72”,“差异”:“151659”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“0”}
,{“id”:“13”,“uuid”:“af2bde11-bce2-f032-877b-129e7bc866a3”,“计数”:“61041”,“哈希”:“a513d5bec7fe514ec76083d299b8d71a9c7781fb”,“差异”:“151660”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“35088848”}
,{“id”:“14”,“uuid”:“e43a1bb1-d369-8f21-0f10-306c3c259952”,“计数”:“48343”,“哈希”:“8d8c0fa097c7f52b766b17c09ca14475add4753a”,“差异”:“151661”,“时间戳”:“2017-05-25 14:12:32”,“速度”:“35113504”}
,{“id”:“15”,“uuid”:“660f22da-06fd-3794-6876-5f90718ea73c”,“计数”:“25185”,“哈希”:“27057106809AAFC4CFE3D2B93D394F07C0D06D1”,“差异”:“151662”,“时间戳”:“2017-05-25 14:12:32”,“速度”:“8068040”}
,{“id”:“16”,“uuid”:“8bd5be38-7a78-aed8-d123-fabf2eb56d7c”,“计数”:“2873”,“哈希”:“d95f01753799d34551e434343e4fcb04d0df1151”,“差异”:“151631”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“80558744”}
,{“id”:“17”,“uuid”:“dbbb3ca5-5fcc-844c-20e8-fd38ef74dbde”,“计数”:“48255”,“散列”:“193A3132B41CFDE9B91DADB196AE184AB5FB3”,“差异”:“151663”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“35001152”}
,{“id”:“18”,“uuid”:“73807ab9-b253-d804-5ea6-8d702a81ca51”,“计数”:“14286”,“哈希”:“F797C0A6F201DB68DF691360859758E0B637C7”,“差异”:“151674”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“43866360”}
,{“id”:“19”,“uuid”:“8c5aaf9e-11e4-08d5-76ad-8c65ea62faf2”,“计数”:“80511”,“哈希”:“81bae19474f4ebb309765c9cb1147269117b4538”,“差异”:“151669”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“62409648”}
,{“id”:“20”,“uuid”:“bbc42163-ffab-66b2-58dc-3d310c9a69bd”,“计数”:“26971”,“哈希”:“05d09c340ee28bbfc0f6ebc00620220b87be0f78”,“差异”:“151670”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“35116608”}
,{“id”:“21”,“uuid”:“46c0f5e8-90ee-1b0b-38bd-958cda7469f5”,“计数”:“83311”,“哈希”:“8af8ca1f5912a157cca0d333c38e439b036f671d”,“差异”:“151671”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“34999840”}
,{“id”:“22”,“uuid”:“8df0d389-a377-b96b-f52d-b9c80bb67050”,“计数”:“30633”,“哈希”:“d13ebcc7579cee7f94ed75e11105fa2a88dcc5d0”,“差异”:“151672”,“时间戳”:“2017-08-23 14:31:24”,“速度”:“2112232”}
,{“id”:“23”,“uuid”:“03c68084-9fe9-0f72-41d1-39a0cb3cb779”,“计数”:“33989”,“哈希”:“2B15AE3E8A60E88A9F4DDFF0C459FE9D75B1E86”,“差异”:“151673”,“时间戳”:“2017-05-25 14:12:32”,“速度”:“32835424”}
,{“id”:“24”,“uuid”:“5713d483-55a1-14a0-3ffa-11e3266ca036”,“计数”:“7848”,“哈希”:“12FB05BE8BBECDD63C308A2E90C187E2E42ACE7”,“差异”:“151675”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“41465896”}
,{“id”:“25”,“uuid”:“a25bb497-4172-cb53-2fed-12139fc2de9f”,“计数”:“359”,“哈希”:“14D5C11055B0F5E24BBF28C8A519B3F5D0606D97A”,“差异”:“151676”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“0”}
,{“id”:“26”,“uuid”:“ca38be26-78f7-5e7f-b1cd-51fcfcb9c711”,“计数”:“418”,“哈希”:“0e72c5d8e3156c6832c0d1acdc2e27dbd1fb0faa”,“差异”:“151677”,“时间戳”:“2017-05-25 14:12:34”,“速度”:“0”}
,{“id”:“27”,“uuid”:“4f51aad3-5c1d-b52d-2a65-fa95d2b8c5c8”,“计数”:“393”,“哈希”:“a01b90a813230b5faeaf6010”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Table - Mister Jojo</title>
  <style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color:lightsteelblue
}
* {
  box-sizing: border-box; 
  margin: 0; padding: 0; outline: 0;
}
table { margin:0; border-collapse: collapse }

table tbody td { 
  text-align: center;
  white-space: nowrap;
  padding: .2em .5em; 
  border: 1px solid cadetblue;
}
table tbody tr:nth-child(even) {background:lightcyan }  
table tbody tr:nth-child(odd) {background:white } 

#Table-Boxes {
  display          : block;
  position     : relative;
  margin       : 1em;
  --top_fix    : 30px;
  --left_fix   : 40px;
  --scroll_bar : 16px;
  width        : 600px; 
  height       : 400px;
  resize       : both;
  overflow     : hidden;
  background-color:ghostwhite;
  min-width: 100px;
  min-height: 70px;
}
#Table-Boxes > div > span {
  text-align: center;
  padding   : .4em .5em; 
  border    : 1px solid cadetblue;
  background-color: lightskyblue;
  display: inline-block;
}
#Table-Boxes > div {
  display : block;
  position: absolute;
  margin  : 0
}
#Label-top-left {
  top     : 0;
  left    : 0; 
}
#Labels-OnTop {
  top     : 0;
  left    : var(--left_fix);
  width     : calc(100% - var(--left_fix) - var(--scroll_bar) ); 
  height  : var(--top_fix);
  overflow: hidden;
  white-space: nowrap;
}
#Labels-OnLeft {
  top     : var(--top_fix);
  left    : 0;
  width     : var(--left_fix);
  height    : calc(100% - var(--top_fix)  - var(--scroll_bar) ); 
  overflow: hidden;
}
#Table-Content {
  top     : var(--top_fix);
  left    : var(--left_fix);
  height    : calc(100% - var(--top_fix)  - var(--scroll_bar) ); 
  width     : calc(100% - var(--left_fix) - var(--scroll_bar) ); 
  overflow: hidden;
}
#Bar-V { 
  top  : var(--top_fix);
  right: 0;
  width: var(--scroll_bar);
  height: calc(100% - var(--top_fix)  - var(--scroll_bar) ); 
  overflow-x: hidden;
  overflow-y: auto;
}
#Bar-H { 
  left  : var(--left_fix);
  bottom: 0;
  height: var(--scroll_bar);
  width: calc(100% - var(--left_fix) - var(--scroll_bar) ); 
  overflow-x: auto;
  overflow-y: hidden;
}
  </style>
</head>

<body>

  <div id="Table-Boxes">
    <div id="Label-top-left"></div>
    <div id="Labels-OnTop"></div>
    <div id="Labels-OnLeft">
      <table><tbody></tbody></table>
    </div>
    <div id="Table-Content">
      <table><tbody></tbody></table>
    </div>
    <div id="Bar-V"><span>&thinsp;</span></div>
    <div id="Bar-H"><span>&thinsp;</span></div>
  </div>

<script>
  var Data_tab = 
    [ { "id"       : "1"
      , "uuid"     : "b25202a1-c732-f5e4-c976-f725092a9f02"
      , "count"    : "19622"
      , "hash"     : "fddf1277943af21b9282bd6a4ff53bc19168854e"
      , "diff"     : "151621"
      , "timestamp": "2017-08-23 14:31:26"
      , "speed"    : "29553600"
      } 
    , { "id"       : "2"
      , "uuid"     : "ade0f2a7-6838-d1f3-646c-7c238a9383a9"
      , "count"    : "24794"
      , "hash"     : "2b52c53b1775c7729d873db22d23adc38d13c99f"
      , "diff"     : "151622"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "29685192"
      } 
    , { "id"       : "3"
      , "uuid"     : "1040a7f3-aee2-69cd-7be8-97683c1dd406"
      , "count"    : "64495"
      , "hash"     : "585421d85d3bc6f068cb1b0da2a3587f585bdd9e"
      , "diff"     : "151623"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "51766808"
      } 
    , { "id"       : "4"
      , "uuid"     : "f2bc0ef7-bc05-d425-1b73-451ba5b08011"
      , "count"    : "71693"
      , "hash"     : "150c32da8771141b1d3ed4725389ee3496d6218f"
      , "diff"     : "151624"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "53923592"
      } 
    , { "id"       : "5"
      , "uuid"     : "763153c1-ce21-db34-f98a-703457575ce0"
      , "count"    : "92657"
      , "hash"     : "db82a3cfc601db58d0a41f9928e371dfe40067fa"
      , "diff"     : "151625"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "29923912"
      } 
    , { "id"       : "6"
      , "uuid"     : "ddf160de-a052-7404-cfcc-36605c5a01ce"
      , "count"    : "57471"
      , "hash"     : "8edc173bb8e9cc89f0525e59bfa17c486aefd9d9"
      , "diff"     : "151626"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "53787840"
      } 
    , { "id"       : "7"
      , "uuid"     : "3aa65601-7834-a62e-fe5d-fbd0b4e703c7"
      , "count"    : "79016"
      , "hash"     : "0f8c4ce07af5730c60550d64e3160950bd1994e0"
      , "diff"     : "151627"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "20422664"
      } 
    , { "id"       : "8"
      , "uuid"     : "16bee402-b87d-8172-daf3-f918b0d9f2ff"
      , "count"    : "8929"
      , "hash"     : "ec563d631f981a5770dea4bf7390b79eb3e649ce"
      , "diff"     : "151628"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "43552496"
      } 
    , { "id"       : "9"
      , "uuid"     : "3b1b3e69-0ad0-4c9c-f786-ca6fc30c6f65"
      , "count"    : "9863"
      , "hash"     : "89c20f5552fb74461c67ba9a3bc13ec8b66bf6b3"
      , "diff"     : "151531"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "272836232"
      } 
    , { "id"       : "10"
      , "uuid"     : "b64d86b0-fcab-2120-18cc-a6efaabbafe0"
      , "count"    : "2893"
      , "hash"     : "e0fb5a4dad9f7804e8d7c51f3f1c49f17e21e45a"
      , "diff"     : "151658"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "35025144"
      } 
    , { "id"       : "11"
      , "uuid"     : "df8dd8bd-c9df-a8fc-977e-0f89c6a2e017"
      , "count"    : "9952"
      , "hash"     : "1f89b65e230f0525ea41b27b7e3548daedb5b1a8"
      , "diff"     : "151532"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "274418184"
      } 
    , { "id"       : "12"
      , "uuid"     : "53f39083-5999-dddf-30e2-4b53d1bf3fa4"
      , "count"    : "346"
      , "hash"     : "eb7f5723b9ed7239ecbf951ea51b3c8927c29b72"
      , "diff"     : "151659"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "0"
      } 
    , { "id"       : "13"
      , "uuid"     : "af2bde11-bce2-f032-877b-129e7bc866a3"
      , "count"    : "61041"
      , "hash"     : "a513d5bec7fe514ec76083d299b8d71a9c7781fb"
      , "diff"     : "151660"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "35088848"
      } 
    , { "id"       : "14"
      , "uuid"     : "e43a1bb1-d369-8f21-0f10-306c3c259952"
      , "count"    : "48343"
      , "hash"     : "8d8c0fa097c7f52b766b17c09ca14475add4753a"
      , "diff"     : "151661"
      , "timestamp": "2017-05-25 14:12:32"
      , "speed"    : "35113504"
      } 
    , { "id"       : "15"
      , "uuid"     : "660f22da-06fd-3794-6876-5f90718ea73c"
      , "count"    : "25185"
      , "hash"     : "27057106809aafcc4cfe3d2b93d394f07c0d06d1"
      , "diff"     : "151662"
      , "timestamp": "2017-05-25 14:12:32"
      , "speed"    : "8068040"
      } 
    , { "id"       : "16"
      , "uuid"     : "8bd5be38-7a78-aed8-d123-fabf2eb56d7c"
      , "count"    : "2873"
      , "hash"     : "d95f01753799d34551e434343e4fcb04d0df1151"
      , "diff"     : "151631"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "80558744"
      } 
    , { "id"       : "17"
      , "uuid"     : "dbbb3ca5-5fcc-844c-20e8-fd38ef74dbde"
      , "count"    : "48255"
      , "hash"     : "193a3132b41ccfefde9b91dadb196ae184ab5fb3"
      , "diff"     : "151663"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "35001152"
      } 
    , { "id"       : "18"
      , "uuid"     : "73807ab9-b253-d804-5ea6-8d702a81ca51"
      , "count"    : "14286"
      , "hash"     : "f797c0a6f201db68df69136085954758e0b637c7"
      , "diff"     : "151674"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "43866360"
      } 
    , { "id"       : "19"
      , "uuid"     : "8c5aaf9e-11e4-08d5-76ad-8c65ea62faf2"
      , "count"    : "80511"
      , "hash"     : "81bae19474f4ebb309765c9cb1147269117b4538"
      , "diff"     : "151669"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "62409648"
      } 
    , { "id"       : "20"
      , "uuid"     : "bbc42163-ffab-66b2-58dc-3d310c9a69bd"
      , "count"    : "26971"
      , "hash"     : "05d09c340ee28bbfc0f6ebc00620220b87be0f78"
      , "diff"     : "151670"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "35116608"
      } 
    , { "id"       : "21"
      , "uuid"     : "46c0f5e8-90ee-1b0b-38bd-958cda7469f5"
      , "count"    : "83311"
      , "hash"     : "8af8ca1f5912a157cca0d333c38e439b036f671d"
      , "diff"     : "151671"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "34999840"
      } 
    , { "id"       : "22"
      , "uuid"     : "8df0d389-a377-b96b-f52d-b9c80bb67050"
      , "count"    : "30633"
      , "hash"     : "d13ebcc7579cee7f94ed75e11105fa2a88dcc5d0"
      , "diff"     : "151672"
      , "timestamp": "2017-08-23 14:31:24"
      , "speed"    : "21122312"
      } 
    , { "id"       : "23"
      , "uuid"     : "03c68084-9fe9-0f72-41d1-39a0cb3cb779"
      , "count"    : "33989"
      , "hash"     : "2b15ae3e8a60e88a9f4ddff0c4599fe9d75b1e86"
      , "diff"     : "151673"
      , "timestamp": "2017-05-25 14:12:32"
      , "speed"    : "32835424"
      } 
    , { "id"       : "24"
      , "uuid"     : "5713d483-55a1-14a0-3ffa-11e3266ca036"
      , "count"    : "7848"
      , "hash"     : "12fb05be8bfbecdd63c308a2e90c187e2e42ace7"
      , "diff"     : "151675"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "41465896"
      } 
    , { "id"       : "25"      , "uuid": "a25bb497-4172-cb53-2fed-12139fc2de9f"
      , "count"    : "359"
      , "hash"     : "14d5c1105b0f5e24bbf28c8a519b3f5d0606d97a"
      , "diff"     : "151676"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "0"
      } 
    , { "id"       : "26"
      , "uuid"     : "ca38be26-78f7-5e7f-b1cd-51fcfcb9c711"
      , "count"    : "418"
      , "hash"     : "0e72c5d8e3156c6832c0d1acdc2e27dbd1fb0faa"
      , "diff"     : "151677"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "0"
      } 
    , { "id"       : "27"
      , "uuid"     : "4f51aad3-5c1d-b52d-2a65-fa95d2b8c5c8"
      , "count"    : "393"
      , "hash"     : "a01b90a813230b5faeaf6010d847be1ab65cf9b7"
      , "diff"     : "151684"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "0"
      } 
    , { "id"       : "28"
      , "uuid"     : "bfa8b76e-c159-1d20-475c-33d617480e88"
      , "count"    : "373"
      , "hash"     : "72cacce09e5ae1c9f7d5c0d9bbbf8dd1e21ed11f"
      , "diff"     : "151685"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "0"
      } 
    , { "id"       : "29"
      , "uuid"     : "f7014ffd-e5b3-3854-cf34-e8cec902c684"
      , "count"    : "156604"
      , "hash"     : "d12efcfc16f83d347a9a04d7547aa947a02dff9c"
      , "diff"     : "151686"
      , "timestamp": "2017-05-25 14:12:32"
      , "speed"    : "35023128"
      } 
    , { "id"       : "30"
      , "uuid"     : "6bda4364-6952-12f1-3e11-2687c501a08a"
      , "count"    : "1024"
      , "hash"     : "4776e8f8df67537a4bc357ae5407486befa36eea"
      , "diff"     : "151687"
      , "timestamp": "2017-05-25 14:12:34"
      , "speed"    : "43956480"
      } 
    ] 

const TableBoxes   = document.querySelector('#Table-Boxes')
    , Head_Table   = document.querySelector('#Labels-OnTop')
    , Label_tl     = document.querySelector('#Label-top-left')
    , Cols_Table   = document.querySelector('#Labels-OnLeft table tbody')
    , moving_Table = document.querySelector('#Table-Content table tbody')
    , LabelsOnLeft = document.querySelector('#Labels-OnLeft')
    , TableContent = document.querySelector('#Table-Content')
    , Scroll_V     = document.querySelector('#Bar-V')
    , Scroll_H     = document.querySelector('#Bar-H')
    , Tspan        = document.createElement('span')

TableBoxes.style.setProperty('--scroll_bar', getScrollbarWidth()+'px')

// set Head table columns names
C_Names = Object.entries(Data_tab[0]).map(e=>e[0])  // get names

// fill tables..
for(let r_tab of Data_tab)
{
  let fixRow = Cols_Table.insertRow(-1)
  let movRow = moving_Table.insertRow(-1)
  C_Names.forEach((c_tab,i)=>{
    if (i===0) fixRow.insertCell(0).textContent     = r_tab[c_tab]    
    else       movRow.insertCell((i-1)).textContent = r_tab[c_tab]
  })
}

// top left label
let xLabel         = Tspan.cloneNode()
xLabel.textContent = C_Names[0]
xLabel.style.width = Cols_Table.rows[0].cells[0].offsetWidth +'px';
Label_tl.appendChild(xLabel) 

// harmoniz sizes...
TableBoxes.style.setProperty('--top_fix', (xLabel.offsetHeight +1) +'px')
TableBoxes.style.setProperty('--left_fix', (Cols_Table.rows[0].cells[0].offsetWidth +1) +'px')

Scroll_H.querySelector('span').style.width  = moving_Table.offsetWidth +'px';
Scroll_V.querySelector('span').style.height = moving_Table.offsetHeight +'px';

C_Names.forEach( (hTab,i)=>{
  if(i>0) {
    let xLabel         = Tspan.cloneNode()
    xLabel.textContent = hTab
    xLabel.style.width = moving_Table.rows[0].cells[(i-1)].offsetWidth +'px'
    Head_Table.appendChild(xLabel) 
  }
})

// scrolls synchros...
Scroll_V.scrollTop  = 0
Scroll_H.scrollLeft = 0

Scroll_V.onscroll=e=>{
  LabelsOnLeft.scrollTop = Scroll_V.scrollTop
  TableContent.scrollTop = Scroll_V.scrollTop
}
Scroll_H.onscroll=e=>{
  Head_Table.scrollLeft   = Scroll_H.scrollLeft
  TableContent.scrollLeft = Scroll_H.scrollLeft
}

//  https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript  Nov 2014
function getScrollbarWidth()
{
  // Creating invisible container
  const outer                 = document.createElement('div')
  outer.style.visibility      = 'hidden'
  outer.style.overflow        = 'scroll'    // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps
  document.body.appendChild(outer)

  // Creating inner element and placing it in the container
  const inner = document.createElement('div')
  outer.appendChild(inner)

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth)

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer)

  return scrollbarWidth
}
</script>
</body>
</html>