您的当前位置：首页 HTML页面table滚动条的实现

HTML页面table滚动条的实现

来源：希系情感

主要解决了几点问题：

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>

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