HTML頁(yè)面table滾動(dòng)條的完成
發(fā)表時(shí)間：2023-09-10 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了關(guān)于HTML頁(yè)面table滾動(dòng)條的實(shí)現(xiàn) ，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下table scrollbar & header fixed有很多頁(yè)面由于數(shù)據(jù)量過(guò)大，會(huì)產(chǎn)生橫縱滾動(dòng)條。為了便于使用者觀看，我們要把表頭固定一下。根據(jù)這個(gè)需求寫(xiě)了個(gè)dem...
這篇文章主要介紹了關(guān)于HTML頁(yè)面table滾動(dòng)條的實(shí)現(xiàn) ，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下
table scrollbar & header fixed
有很多頁(yè)面由于數(shù)據(jù)量過(guò)大，會(huì)產(chǎn)生橫縱滾動(dòng)條。為了便于使用者觀看，我們要把表頭固定一下。根據(jù)這個(gè)需求寫(xiě)了個(gè)demo來(lái)實(shí)現(xiàn)這個(gè)功能。
主要代碼塊
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橫縱滾動(dòng)條 3.table列寬自適應(yīng) 4.table內(nèi)容不換行</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>網(wǎng)上也有很多的例子，但是實(shí)現(xiàn)的效果不是想要的，自己工作需要做了一下，畫(huà)面不好看，重點(diǎn)看效果，如有問(wèn)題請(qǐng)指正！
相關(guān)推薦：
HTML頁(yè)面原生VIDEO標(biāo)簽隱藏下載按鈕功能
實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行js方法
以上就是HTML頁(yè)面table滾動(dòng)條的實(shí)現(xiàn) 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
