向右滚动的表格中的粘性标题

Question

你能告诉我如何实现表格的粘性标题。它位于 div 中，溢出：自动并向右滚动。我支持 IE10+。

这是我的html

<div class='table-block'>
  <div class='table-header'>
      <div>
         header 1
      </div>
      <div>
         header 1
      </div>
      <div>
         header 1
      </div>      
      <div>
         header 1
      </div>
  </div>
    <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
      <div class='table-body'>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>
      <div>
         body 1
      </div>      
      <div>
         body 1
      </div>
  </div>
</div>

这是我的css

    .table-block{
  overflow: auto;
}

.table-header{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-header > div{
  display: table-cell;
  border: 1px solid;
  width: 1000px;
}

.table-body{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-body > div{
  display: table-cell;
  border: 1px solid;
  width: 1000px;
}

我需要完全相同的标记。

请有人给我一个建议。

这里是最小复制的小提琴，请检查https://jsfiddle.net/kzmwtuhb/2/

Answer 1

我已经更新了你的 jsfiddle。我不确定我的解决方案是您正在寻找的。​​p>