小编给大家分享一下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; } 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:
<body> <h5>完成效果:1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h5> <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滚动条有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。