title: Sticky table rows
body: <p>I am trying to implement a calendar list view like the iOS one. Basically, what I am doing now is to loop through my array of events. If it is a new date, print a date header, else print the calendar event. I want to make the DATE HEADER rows sticky until they get "scrolled away". </p>
  
  <p>How can I achieve that? I see lots of examples on sticky headers but there's no actual one that applies this "sticky" feature to table rows only. My <code>&lt;table</code> is also put within its own scrollable fixed height  and I want the header to stick at the top of the <code>&lt;div&gt;</code> instead of at <code>top:0;</code></p>
  
  <p>I have put my code into a pen at <a href="http://codepen.io/anon/pen/zxpkr" rel="nofollow">http://codepen.io/anon/pen/zxpkr</a> and now I am left with fixing the <code>colspan</code> because my <code>&lt;td&gt;</code> doesnt span across the cells, and getting the <code>&lt;tr&gt;</code> to stick at the top of the <code>&lt;div&gt;</code>.</p>