HTML页面table滚动条的实现
html
table
实现
这篇文章主要介绍了关于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：
<body>
<h4>完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4>
<p class="table-scroll">
<table>
<thead>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>2</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>3</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>4</td>
<td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>5</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>6</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>7</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>8</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>9</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>10</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>11</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>12</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>13</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>14</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>15</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>16</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>17</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>18</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>19</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>20</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>21</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>22</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>23</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>24</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>25</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>26</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>27</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>28</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>28</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>29</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>30</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
</tbody>
</table>
</p>
</body>登录后复制
网上也有很多的例子，但是实现的效果不是想要的，自己工作需要做了一下，画面不好看，重点看效果，如有问题请指正！
相关推荐：
以上是HTML页面table滚动条的实现 的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
4 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前
By DDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前
By DDD
如何修复KB5055523无法在Windows 11中安装？
2 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
