title: Sticky Table Header With CSS For Element-UI Component
body: <p>In my code I used element-ui table (<a href="https://element.eleme.io/#/en-US/component/table" rel="nofollow noreferrer">https://element.eleme.io/#/en-US/component/table</a>) component. It works nice but I want to customize the table header as sticky.</p>
  
  <p>It provides it with max-height/height content like: <a href="https://element.eleme.io/#/en-US/component/table#table-with-fixed-columns-and-header" rel="nofollow noreferrer">https://element.eleme.io/#/en-US/component/table#table-with-fixed-columns-and-header</a></p>
  
  <p>But I want to use it like: <a href="https://codepen.io/chriscoyier/pen/PrJdxb" rel="nofollow noreferrer">https://codepen.io/chriscoyier/pen/PrJdxb</a></p>
  
  <p>In CSS, there are some tricks about it, like:</p>
  
  <pre><code>th {
    background: white;
    position: sticky;
    top: 0;
    ...
  }
  </code></pre>
  
  <p>I wonder in here, how can I implement it? Is there any suggestion?</p>
  
  <p>My Case is:</p>
  
  <pre><code>&lt;div css="first-section"&gt;
    ...
  &lt;/div&gt;
  &lt;div css="second-section"&gt;
    ...
  &lt;/div&gt;
  &lt;el-table&gt;
    ...
  &lt;/el-table&gt;
  </code></pre>
  
  <p>Example: <a href="https://codepen.io/senolatac/pen/qBdGvRy" rel="nofollow noreferrer">https://codepen.io/senolatac/pen/qBdGvRy</a></p>
  
  <p>To see it on full-screen mode: <a href="https://codepen.io/senolatac/full/qBdGvRy" rel="nofollow noreferrer">https://codepen.io/senolatac/full/qBdGvRy</a></p>