关键词：
【中文标题】水平和垂直可滚动的大表格【英文标题】：Horizontally and vertically scrollable large table 【发布时间】：2020-02-07 05:35:00 【问题描述】：好吧，这是关于带有固定页眉和页脚的无聊滚动表的下一篇文章。这个话题来自于 HTML 的刚性结构。源问题是显示非常大的表格溢出屏幕宽度作为高度。我还希望将表头固定在表格顶部，并将其副本固定在表格底部。
经过深入的谷歌搜索和大量有保证的代码测试后，我发现了下一个深层嵌套问题： - 单独滚动 tbody 时，页眉和页脚不保持表格主体的单元格间距 - tbody 行覆盖标题 - tbody 的垂直滚动几乎不能与整个表格（包括页眉和页脚）的水平滚动结合。
我开始写一些技巧来克服它，但这也取决于使用的浏览器。
<html><head><meta charset="utf-8"><title>pokus</title><script>var 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"
]; var _tr_ =document.createElement('tr');var _td_ =document.createElement('td');
function fill_table()
var thd=document.getElementById('hot'); var tbd=document.getElementById('bot');
var poc=tab.length;var hada=thd.firstChild.firstChild;var dada=tbd.firstChild.firstChild;
for(var klic in tab[0]) var hela=document.createElement("th"); hela.innerHTML=klic; hada.appendChild(hela);;
for(var i=0;i< poc;i++) // after header assembled the table rows are cloned and filled
var ntr=_tr_.cloneNode(false); // clone free row
for( klic in tab[i]) // with each table row clone free cell and fill it
var ntd=_td_.cloneNode(false); ntd.innerHTML=tab[i][klic]; ntr.appendChild(ntd);
tbd.firstElementChild.appendChild(ntr); // show next row
var lol=tbd.rows[0].cells.length; var maxirka=0;
for (var k=0;k < lol;k++) maxirka += thd.rows[0].cells[k].style.width=tbd.rows[0].cells[k].offsetWidth;;
thd.style.width=maxirka;
var tfd=document.getElementById('iak').appendChild(thd.cloneNode(true));tfd.id='fot';
var tfh=tfd.offsetHeight; var tih=document.getElementById('iak').offsetHeight;
tbd.style.height=tih-tfh-tfh-15;tbd.firstElementChild.style.height=tih-tfh-tfh-20;
</script></head><body onLoad="fill_table()"><br>
<div id="iak" style="overflow:scroll;overflow-y:hidden; width:60%; height:60%;border:#888888 1px solid; " >
<table id="hot" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"><thead><tr></tr></thead></table>
<table id="bot" border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse; height:200px; white-space: nowrap;">
<tbody style="display:block; width:100%; height:200px; overflow:scroll; overflow-x:hidden;"></tbody></table>
</div>
</body>
</html>
解决方案基于创建三个表：header-table、data-table、footer-table（header-table 的克隆），包含在水平滚动的 DIV 中。 header-table 和 data-table 构建完成后，将 data-table 的自动生成的 cell-with 复制到 header-table 的相应单元格中。 一些缺点是垂直滚动条隐藏在表格的右侧，但是您可以使用鼠标滚轮垂直滚动或通过水平滚动到完全右侧来显示条。 可能有人在这里展示了一些基于 CSS 的更好的解决方案，这真的很好，但如果 W3C 小组将定义的正常滚动行为添加到下一个 HTML 版本中可能会更好。
嗯，这篇文章是作为 html 可滚动表格的功能示例编写的，固定的页眉和页脚始终可见。不多也不少，也不是漂亮的装饰。基本任务是尽可能简单地编写它。由于该表旨在成为更复杂的 html 页面的一部分，其中包含公式和其他表，因此不包括全局 CSS。在 W3C 在过去 30 年中大力开发 HTML 功能之后，我想到了类似的东西：
<table style="overflow:scroll; overflow-y:hidden; display:@in_parent_element_only">
<thead style="'header cells corresponding with table cells'">
<row><!--single row header --></row></thead>
<tbody style="overflow:scroll; overflow-x:hidden; 'full_view_table'">
<row><!--lot of rows --></row></tbody>
<tfoot ><row><!--copy of header --></row></tfoot>
</table>
不幸的是，这应该是一种过于简单的方法 - 实际上我测试了很多样式组合，但 THEAD 和 TBODY 单元格不相关（为什么？），或者 THEAD、TBODY、TFOOT 行重叠或取代每个其他，反之亦然。
我知道，一个非常好的结果可以通过繁重的计算、定位和样式来寻找，但我坚持简单和功能，更喜欢信息而不是装饰。
如果有人知道内联style=".." 的什么组合可以保证无论浏览器类型如何都能获得良好的结果，请尝试在此处编写一段注释良好的代码。不仅是为了我，也是为了社区，就像我在这里展示的我的原始方式一样。
【问题讨论】：
【参考方案1】：我对这段旧代码的研究很前卫，所以我做了一个新的;-)
<!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> </span></div>
<div id="Bar-H"><span> </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://***.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>
【讨论】：
看起来不错，谢谢，但抱怨仍然存在：它应该包含在 html 属性中（30 html 年后） 我的叹息没有触动你，乔乔先生，你得到了我的坦克。我不想伤害你。如果有一些真正改进 HTML 的开放论坛，我希望看到它以了解他们处理的内容。以前 HTML 的主要目标是为读者带来以图形方式完全可定制的主要文本信息。另一方面，PDF 是保留图形的格式，而不管读者的习惯如何。我对现在的发展趋势感到反感。很抱歉传播了我的坏心情。 请看问题最后编辑的附录【参考方案2】：我在 *** 中对类似问题的答案进行了深入搜索，并用部分 CSS 重写了我的解决方案（甚至没有完全理解）。
数据是通过对 psql 数据库的 PHP 请求生成的，因此它可以返回需要滚动的非常大的表。
CSS 部分是根据仔细查阅 CSS 教程和手册的各种来源编译而成的。但主要灵感来自“http://***.com/questions/47723996”问题的“http://***.com/users/9557859”回答（均在本网站上）。
好吧，让我们展示一下示例：
var 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"
]; var _tr_ =document.createElement('tr');var _td_ =document.createElement('td');var _th_ =document.createElement('th');var poc=tab.length;
function fill_table()
var tbt=document.getElementById('bt'); var tbh=tbt.getElementsByTagName('thead')[0]; var tbb=tbt.getElementsByTagName('tbody')[0]; var tbf=tbt.getElementsByTagName('tfoot')[0];
var ntr=_tr_.cloneNode(false);for(var klic in tab[0])var nth=_th_.cloneNode(false);nth.innerHTML=klic; ntr.appendChild(nth);;tbh.appendChild(ntr);
for(var i=0;i< poc;i++)
var ntr=_tr_.cloneNode(false);for( klic in tab[i] )var ntd=_td_.cloneNode(false);ntd.innerHTML=tab[i][klic];ntr.appendChild(ntd);;tbb.appendChild(ntr);
tbf.appendChild(tbh.rows[0].cloneNode(true));for(i=0;i<tbb.rows.length;i++) tbb.rows[i].cells[0].className="coll-sticky";
table border-collapse: collapse;border-spacing: 0;white-space: nowrap;
.coll-sticky background: aquamarine;position: sticky;left: 0px;
.tabl-sticky>tfoot>tr>th background: aquamarine;position: sticky;bottom: 0px;
.tabl-sticky>thead>tr>th background: aquamarine;position: sticky;top: 0px;
.tabl-height height: 320px;display: block;overflow: scroll;width: 100%;
.tabl-bordered>thead>tr>th,
.tabl-bordered>tfoot>tr>th,
.tabl-bordered>tbody>tr>td border: 1px solid black;
.tabl-zebra>tbody>tr:nth-child(odd) background: lightgray <body onLoad="fill_table()"><br>
<table border="1" >
<tr style="height:100px;">
<td style="width:100px;" align="center" >LOGO</td>
<td style="width:600px; background:azure;" align="center" >filter</td>
</tr>
<tr style="max-height:400px;">
<td style="width:100px; background:azure;" align="center" >Left<br>menu</td>
<td style="width:600px; display: block;">
<div class=" tabl-height">
<table id="bt" class="tabl-bordered tabl-sticky tabl-zebra">
<thead></thead><tbody></tbody><tfoot></tfoot>
</table>
</div>
</td>
</tr>
</table></body>该解决方案嵌入到为控制和过滤数据库提取而构建的页面示例中。
数据表嵌套在<DIV> 元素中，页眉/页脚行和第一列分别贴在 DIV 的顶部和左侧边缘。使用父<DIV> 可以防止<THEAD> - <TBODY> 列的列乱序问题。
请注意，必须粘贴的元素是<TH> / <TD>，并且它们的背景颜色必须设置为“白色”，因为如果您将其设置为默认颜色“无”，则它们的文本会随着文本滚动而变脏.
这对我来说看起来很简单，它给出了一个可以理解和可用的结果，你可以随意装饰它。
此表已在 Chrome 中测试，特别是在 Firefox 中。 Explorer/Edge 怀疑不可用。
W3C 的问题箭头仍然存在：为什么 <TABLE> 没有像 scroll-x scroll-y 这样的简单属性来获得简单、正确和可预期的结果（固定页眉、页脚和第一列，如果使用或询问）？
【讨论】：
【参考方案3】：这是一个最小的解决方案，以防万一有人想要快速回答。
你只需要一个滚动的div 包装器和th 元素，position: sticky; 到顶部和背景。就是这样
th
background: aquamarine;
position: sticky;
top: 0px;
.table-wrapper
border: solid 1px black;
height: 200px;
max-width: 200px;
overflow: scroll;
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Some other Header</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>【讨论】：
这是一个使用上述解决方案但使用 div 和 flexbox，而不是 HTML 表格的工作 jsfiddle：jsfiddle.net/nwb07yzL/1向表格添加水平和垂直滚动
】向表格添加水平和垂直滚动【英文标题】：Addinghorizontalandverticalscrollingtoatable【发布时间】：2017-06-1919:01:24【问题描述】：我有一张桌子：<div><divclassName="shadow-z-1"><tableclassName="tabletable-borderedtable-hover"><thead><... 查看详情
表格布局可以同时具有水平和垂直滚动视图吗
】表格布局可以同时具有水平和垂直滚动视图吗【英文标题】：CanTableLayouthavebothhorizontalandverticalscrollview【发布时间】：2013-07-0807:07:01【问题描述】：您好，我创建了一个带有普通滚动视图的表格布局，我希望它可以垂直和水平... 查看详情
html中表格水平和垂直滚动,表头垂直不动,可以水平滚动，大神们请问怎么实现啊？
参考技术A用两个table，一个做表头，一个放内容追问放内容的滚动条，要把水平滚动条拉到最右边才看的到，怎么解决追答结构大概是这样的这样的结构在水平方向出现滚动条的时候，两个table都会跟着水平滚动。 查看详情
Kivy 垂直和水平可滚动的 ScrollView 标签。如何减少/增加水平标签大小？
】Kivy垂直和水平可滚动的ScrollView标签。如何减少/增加水平标签大小？【英文标题】：KivyverticalandhorizontalscrollableScrollViewLabel.Howtoreduce/increasethehorizontalLabelsize?【发布时间】：2021-07-1414:03:53【问题描述】：这是定义一个可以垂直... 查看详情
使用 jquery ui 可拖动，是不是可以有不同的滚动灵敏度垂直和水平？
...用jqueryui可拖动，是不是可以有不同的滚动灵敏度垂直和水平？【英文标题】：Withjqueryuidraggable,isitpossibletohavedifferentscrollsensitivityverticalversushorizontal?使用jqueryui可拖动，是否可以有不同的滚动灵敏度垂直和水平？【发布时间】：2... 查看详情
在水平滚动表格中垂直溢出表格单元格
】在水平滚动表格中垂直溢出表格单元格【英文标题】：Overflowatablecellverticallyinahorizontallyscrollabletable【发布时间】：2020-05-0919:29:21【问题描述】：我正在尝试扩展一个React下拉组件并使其在表格之外可见。表格必须是水平滚动的... 查看详情
修复了带有水平滚动条和垂直滚动条的标题表
】修复了带有水平滚动条和垂直滚动条的标题表【英文标题】：Fixedheadertablewithhorizontalscrollbarandverticalscrollbaron【发布时间】：2013-02-0508:05:14【问题描述】：我一直在尝试解决html/css粘性标题+滚动条的问题。我们正在创建一个程... 查看详情
如何使用角度和离子制作带有固定标题的可滚动表格
...在尝试使用离子网格创建一个带有固定标题的可滚动表格水平和垂直滚动条。我能够实现滚动部分，但无法修复标题。HTML：<ion-contentclass="selectedThemeinv 查看详情
UITableView contentInset 使表格视图除了垂直滚动外还水平滚动
】UITableViewcontentInset使表格视图除了垂直滚动外还水平滚动【英文标题】：UITableViewcontentInsetmakestableviewscrollhorizontallyinadditiontovertically【发布时间】：2013-04-2807:22:48【问题描述】：我正在代码中创建一个UITableViewController并将其推... 查看详情
如何在运行时在垂直可滚动页面内动态创建水平可滚动 Gridview
】如何在运行时在垂直可滚动页面内动态创建水平可滚动Gridview【英文标题】：HowtodynamicallycreatehorizontalscrollableGridviewinsideverticalllyscollablepageatRuntime【发布时间】：2017-06-0205:37:08【问题描述】：我想创建一个像Androidplaystore这样的... 查看详情
如何启用垂直滚动的滚动条并禁用水平滚动？
】如何启用垂直滚动的滚动条并禁用水平滚动？【英文标题】：HowdoIenablescrollbarforverticalscrollanddisableforhorizontal?【发布时间】：2020-06-0720:55:06【问题描述】：我一直在构建具有水平和垂直滚动的布局。垂直可滚动的Column用于主要... 查看详情
uiscrollview 水平和垂直滚动
】uiscrollview水平和垂直滚动【英文标题】：Uiscrollviewscrollshorizontallyandvertically【发布时间】：2017-04-0822:18:51【问题描述】：我在UIscrollView中有UItextview，所以UIscrollview同时水平和垂直滚动。有什么方法可以禁用水平滚动并启用垂直... 查看详情
水平和垂直两个方向滚动
】水平和垂直两个方向滚动【英文标题】：Scrollinghorizontalandverticalbothdirection【发布时间】：2013-06-0606:15:48【问题描述】：我需要水平和垂直滚动图像。我的部分将segregatedvertically和ineachsectionitselfitwillbesomanyimageswhichwillbescrolledhoriz... 查看详情
水平 UIScrollView 中的多个垂直滚动 UIScrollView
】水平UIScrollView中的多个垂直滚动UIScrollView【英文标题】：MultipleverticallyscrollingUIScrollViewsinahorizontalUIScrollView【发布时间】：2012-07-0820:56:40【问题描述】：我正在开发一个应用程序，其中有一个可水平滚动的UIScrollView全屏，其中... 查看详情
向 HTML 表格添加水平滚动条
】向HTML表格添加水平滚动条【英文标题】：AddahorizontalscrollbartoanHTMLtable【发布时间】：2011-07-2820:45:51【问题描述】：有没有办法在HTML表格中添加水平滚动条？我实际上需要它可以垂直和水平滚动，具体取决于表格的增长方式，... 查看详情
如何使 UITableView 水平和垂直滚动
】如何使UITableView水平和垂直滚动【英文标题】：HowtomakeUITableViewscrollbothhorizontallyandvertically【发布时间】：2015-02-0520:48:29【问题描述】：我不知道如何让UITableView作为Kickstarterios应用程序水平和垂直滚动。您能否简要解释一下他... 查看详情
固定水平位置，但允许使用 jQuery 进行垂直滚动
】固定水平位置，但允许使用jQuery进行垂直滚动【英文标题】：FixedhorizontalpositionbutallowingverticalscrollwithjQuery【发布时间】：2012-02-2321:49:37【问题描述】：是否有jQuery插件或其他JS库，用于使某些元素具有固定的水平位置，同时允... 查看详情
SwiftUI View 也可以水平和垂直滚动，而不是仅垂直滚动
】SwiftUIView也可以水平和垂直滚动，而不是仅垂直滚动【英文标题】：SwiftUIViewscrollshorizontalandverticalaswell,insteadofscrollingonlyvertically【发布时间】：2021-06-0316:29:57【问题描述】：我正在构建一个应用程序作为一个学习项目。我遇到... 查看详情