title: Creating a sticky header on a thead
body: <p>I have a table that can become come very long on the page so the header gets lost and so I thought a sticky header would fix that. You scroll down too far and the header is still there to let you know what the fields are. </p>
  
  <p>I know the traditional ways of doing a sticky header with jQuery, but I wanted to try a different way with just css.</p>
  
  <p>I found <a href="http://www.red-team-design.com/position-sticky-might-be-the-next-best-thing" rel="nofollow noreferrer">this</a> on the web and it is supposed to work, but I cannot seem to make it do what it is supposed to.</p>
  
  <pre class="lang-css prettyprint-override"><code>.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
  }
  </code></pre>
  
  <p>and help would be great or any other css tricks to help this work would be great.</p>
  
  <p>I set up a jsFiddel over <a href="http://jsfiddle.net/bwHnq/32/" rel="nofollow noreferrer">here</a> of what my form looks like so you can get a good idea of what is happening.</p>