html - How do I make a div with position sticky works on Chrome and IE? -

i have, global div, 2 divs 1 display header , second display body. scrolling enabled want make header fixed when scrolling vertically.

i used position:sticky , works firefox.

can me.

css:

.wrapper{     width: 400px;     overflow: auto; }  .headertable {     background-color: white;     min-width: 600px;     top: 0;     position: sticky; }  .bodytable{     min-width: 600px;     height: 100px }  table{     width: 100%;     border: 1px solid;     text-align: center; } 

html :

<div class="wrapper">  <div class="headertable" id="headerfixed">     <table>          <tr><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td><td>head</td></tr>     </table> </div> <div class="bodytable">      <table>          <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>         <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>     </table> </div> 

the jsfiddle example : https://jsfiddle.net/v1acdk9p/