好吧，这是您的下一篇有关无聊的滚动表（具有固定的页眉和页脚）的文章。本主题来自HTML的僵化结构。根本问题是要显示出巨大的表，它会将屏幕宽度作为高度溢出。我还希望将表头固定在表的顶部，并将其副本固定在表的底部。
在大量的谷歌搜索和测试了很多有保证的代码之后，我发现了下一个嵌套问题： -当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>
该解决方案基于创建三个表：头表，数据表，页脚表（头表的克隆），并用水平滚动的DIV封装。 在建立标头表和数据表之后，将自动生成的数据表的单元格复制到标头表的相应单元格中。 缺点是垂直滚动条隐藏在表格的右侧，但是您可以使用鼠标滚轮垂直滚动条或通过水平滚动到完全右侧来显示该条。 可能有人在这里展示了一些基于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=".."的组合都能保证良好的结果，请尝试在此处编写一段注释良好的代码。正如我在这里展示的原始方式一样，不仅对我来说，对社区也一样。
答案 0 :(得分：2)
在研究这个旧代码时，我很前卫，所以我做了一个新的;-）
$ jq -Mn -f test.jq test.json
{
"player1": 6,
"player2": 60
}
答案 1 :(得分：0)
我对stackoverflow进行了深入搜索，以回答类似的问题，然后用部分CSS（甚至没有完全理解）重写我的解决方案。
数据是通过PHP请求向psql数据库生成的，因此它可以返回非常大的表，需要滚动。
CSS部分是从各种来源编译而来的，请仔细阅读CSS教程和手册。但是主要灵感来自“ http://stackoverflow.com/users/9557859”问题的“ http://stackoverflow.com/questions/47723996”答案（均在此站点上提供）。
好吧，让我们展示示例：
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这样的简单属性才能获得简单，正确和可预期的结果（固定的页眉，页脚和第一列（如果使用或询问） ）包括了吗？