title: how to make table header fixed in html without using thead tag?
body: <p>I have the following table which do not have thead:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table&gt;
       &lt;tbody&gt;
        &lt;tr class="header"&gt;
         &lt;th&gt;Head 1&lt;/th&gt;
         &lt;th&gt;Head 2&lt;/th&gt;
         &lt;th&gt;Head 3&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
         &lt;td&gt;body&lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
      &lt;/table&gt;
  
  CSS:
  
  .table tr td {
      overflow-y: auto    
  }
  .table tr.header th {
      display: block;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>So how to fix the table header in above table.</p>