这篇文章主要介绍了关于HTML页面table滚动条的实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
table scrollbar & header fixed
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
主要解决了几点问题：
1.table实现横纵滚动条
2.table表头固定
3.table列宽自适应
4.table内容不换行
立即学习“前端免费学习笔记（深入）”；
主要代码块
css：
.table-scroll { width: calc(100% - 5px); overflow-x: scroll; white-space: nowrap; } .table-scroll table { table-layout: fixed; width: calc(100% - 10px); background-color:darkseagreen ; } .table-scroll thead { display: table-row; background-color: bisque; } .table-scroll tbody { overflow-y: scroll; overflow-x: hidden; display: block; height: calc(100vh - 300px); } .table-scroll th,td { width: 160px; overflow: hidden; text-overflow: ellipsis; min-width: 160px; border: 1px solid #808080; } h4, h5 { color: cornflowerblue; }
登录后复制
js：
$(function() { $('.table-scroll').scroll(function() { $('.table-scroll table').width($('.table-scroll').width() + $('.table-scroll').scrollLeft()); }); var tableTdWidths = new Array(); var tableWidth = 0; var tableTr0Width = 0; var tableThNum = 0; var tableTr1Width = 0; tableWidth = $('.table-scroll table').css('width').replace('px',''); tableThNum = $('.table-scroll tr:eq(0)').children('th').length; if ($('.table-scroll tr').length == 1) { // header only if (tableWidth > tableTr0Width) { $('.table-scroll tr:eq(0)').children('th').each(function(i){ $(this).width(parseInt(($(this).css('width').replace('px','')) + parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px'); }); } } else { // header and body tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px',''); $('.table-scroll tr:eq(1)').children('td').each(function(i){ tableTdWidths[i]=$(this).css('width').replace('px',''); }); $('.table-scroll tr:eq(0)').children('th').each(function(i) { if(parseInt($(this).css('width').replace('px', '')) > parseInt(tableTdWidths[i])) { tableTdWidths[i] = $(this).css('width').replace('px',''); } }); if (tableWidth > tableTr1Width) { //set all th td width $('.table-scroll tr').each(function(i){ $(this).children().each(function(j){ $(this).css('min-width',(parseInt(tableTdWidths[j]) + parseInt(Math.floor((tableWidth - tableTr1Width) / tableThNum))) + 'px'); }); }); } else { //method 1 : set all th td width $('.table-scroll tr').each(function(i){ $(this).children().each(function(j){ $(this).css('min-width',tableTdWidths[j] + 'px'); }); }); } } });
登录后复制
html：
完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行
登录后复制
title1title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
title1
1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 2 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 3 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 4 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 5 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 6 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 7 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 8 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 9 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 10 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 11 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 12 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 13 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 14 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 15 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 16 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 17 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 18 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 19 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 20 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 21 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 22 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 23 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 24 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 25 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 26 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 27 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 28 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 28 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 29 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 30 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1
网上也有很多的例子，但是实现的效果不是想要的，自己工作需要做了一下，画面不好看，重点看效果，如有问题请指正！
相关推荐：
HTML页面原生VIDEO标签隐藏下载按钮功能
HTML页面原生VIDEO标签隐藏下载按钮功能
以上就是HTML页面table滚动条的实现 的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3086194.html
