效果图:
1.table的格式
<div class='Table-Cont' id='Table-Cont'>
<table class="table table-responsive table-bordered table-hover table-condensed" style="white-space:nowrap">
<thead>
<tr class="info">
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td >
</td>
<td >
</td>
</tr>
</tbody>
</table>
</div>
css样式Code:
.Table-Cont{
max-height: 500px;
overflow: auto;
overflow-y:auto;
overflow-x:auto;
background: #ffffff;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}
js:Code
window.onload = function(){
var tableCont = document.querySelector('#Table-Cont');
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
}