HTML页面table滚动条的实现

这篇文章主要介绍了关于html' target='_blank'>HTML页面table滚动条的实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个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：

 body  h4 完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行 /h4  p >

网上也有很多的例子，但是实现的效果不是想要的，自己工作需要做了一下，画面不好看，重点看效果，如有问题请指正！

相关推荐：

HTML页面原生VIDEO标签隐藏下载按钮功能

实现在HTML页面加载完毕后运行js方法

以上就是HTML页面table滚动条的实现 的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。