扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下HTML页面如何实现table滚动条，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
成都创新互联公司成立于2013年，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元龙亭做网站,已为上家服务,为龙亭各地企业和个人服务,联系电话:18982081108
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个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;
}
h5, h6 {
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内容不换行
| title1 | title1 | 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页面如何实现table滚动条有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网