php让表格滚动条,HTML页面table滚动条的实现

最新推荐文章于 2025-05-19 15:18:43 发布

转载最新推荐文章于 2025-05-19 15:18:43 发布 · 239 阅读

文章标签：

#php让表格滚动条

本文介绍了一种实现HTML表格滚动条及表头固定的方法，通过CSS和JS实现了表格的横纵滚动条、表头固定、列宽自适应及内容不换行等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要介绍了关于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内容不换行

title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1

1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body12body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body13body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body14body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1body1body1body1body1body1body1body1body1body1body15body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body16body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body17body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body18body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body19body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body110body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body111body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body112body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body113body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body114body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body115body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body116body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body117body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body118body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body119body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body120body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body121body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body122body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body123body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body124body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body125body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body126body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body127body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body128body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body128body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body129body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body130body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1

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