title: Sticky header in table that scrolls right
body: <p>Can you please tell me how can i achieve sticky header for table. It lay in div with overflow: auto and scrolls right. And I supporting IE10+.</p>
  
  <p>here is my html </p>
  
  <pre><code>&lt;div class='table-block'&gt;
    &lt;div class='table-header'&gt;
        &lt;div&gt;
           header 1
        &lt;/div&gt;
        &lt;div&gt;
           header 1
        &lt;/div&gt;
        &lt;div&gt;
           header 1
        &lt;/div&gt;      
        &lt;div&gt;
           header 1
        &lt;/div&gt;
    &lt;/div&gt;
      &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class='table-body'&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;
        &lt;div&gt;
           body 1
        &lt;/div&gt;      
        &lt;div&gt;
           body 1
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my css</p>
  
  <pre><code>    .table-block{
    overflow: auto;
  }
  
  .table-header{
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .table-header &gt; div{
    display: table-cell;
    border: 1px solid;
    width: 1000px;
  }
  
  .table-body{
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .table-body &gt; div{
    display: table-cell;
    border: 1px solid;
    width: 1000px;
  }
  </code></pre>
  
  <p>I need exactly the same markup. </p>
  
  <p>Please someone give me an advice.</p>
  
  <p>Here is fiddle with minimal reproduction please check it <a href="https://jsfiddle.net/kzmwtuhb/2/" rel="nofollow noreferrer">https://jsfiddle.net/kzmwtuhb/2/</a></p>