mvc中，不适用任何table表格样式进行标题（table的首行）的固定展示

效果图：

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)
}