title: Table header needs to remain fixed during scrolling
body: <p>I have a table with a header and a body, and I want the table header to remain fixed while scrolling happens on the body.</p>
  
  <p>The table is set up like so:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Header 1&lt;/th&gt;
              &lt;th&gt;Header 2&lt;/th&gt;
              &lt;th&gt;Header 3&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Data 1&lt;/td&gt;
              &lt;td&gt;Data 2&lt;/td&gt;
              &lt;td&gt;Data 3&lt;/td&gt;
          &lt;/tr&gt;
  
          ...more rows for data...
  
      &lt;/tbody&gt;
  </code></pre>
  
  <p>The table is encapsulated with a  and has CSS like:</p>
  
  <pre><code>overflow-x: hidden;
  overflow-y: auto;
  height: 400px;
  </code></pre>
  
  <p>I need the table header to remain perfectly still but when I add position: fixed; to thead or to the individual th the header gets squished.</p>
  
  <p>Whats the best approach for this?</p>