2023年6月20日发(作者：)
php让表格滚动条,HTML页⾯table滚动条的实现这篇⽂章主要介绍了关于HTML页⾯table滚动条的实现 ，有着⼀定的参考价值，现在分享给⼤家，有需要的朋友可以参考⼀下table scrollbar & header fixed有很多页⾯由于数据量过⼤，会产⽣横纵滚动条。为了便于使⽤者观看，我们要把表头固定⼀下。根据这个需求写了个demo来实现这个功能。主要解决了⼏点问题：实现横纵滚动条表头固定列宽⾃适应内容不换⾏主要代码块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(((tableWidth - tableTr0Width) / tableThNum))) + 'px');});}} else { // header and bodytableTr1Width = $('.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(((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.固定表头 横纵滚动条 列宽⾃适应 内容不换⾏title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1title11body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body12body1body1body1body1body1body1body1body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1 body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1body1⽹上也有很多的例⼦，但是实现的效果不是想要的，⾃⼰⼯作需要做了⼀下，画⾯不好看，重点看效果，如有问题请指正！相关推荐：body1body1body1body1body1body1body1body1body1body1body15body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body16body1
2023年6月20日发(作者：)
php让表格滚动条,HTML页⾯table滚动条的实现这篇⽂章主要介绍了关于HTML页⾯table滚动条的实现 ，有着⼀定的参考价值，现在分享给⼤家，有需要的朋友可以参考⼀下table scrollbar & header fixed有很多页⾯由于数据量过⼤，会产⽣横纵滚动条。为了便于使⽤者观看，我们要把表头固定⼀下。根据这个需求写了个demo来实现这个功能。主要解决了⼏点问题：实现横纵滚动条表头固定列宽⾃适应内容不换⾏主要代码块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(((tableWidth - tableTr0Width) / tableThNum))) + 'px');});}} else { // header and bodytableTr1Width = $('.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(((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.固定表头 横纵滚动条 列宽⾃适应 内容不换⾏title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1title11body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body12body1body1body1body1body1body1body1body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1 body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1body1⽹上也有很多的例⼦，但是实现的效果不是想要的，⾃⼰⼯作需要做了⼀下，画⾯不好看，重点看效果，如有问题请指正！相关推荐：body1body1body1body1body1body1body1body1body1body1body15body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body16body1
发布评论