title: position sticky for complex table header
body: <p>I'm trying to get a sticky table header to work with a complex header. It works fine for standard tables. The table will stick at the top row and not the second causing the header to look "out of whack" or sort of staggered.  I tried putting the position sticky on the thead and that didn't seem to do anything.</p>
  
  <p>Here is my table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border: 1px solid black;
    font-size: 14px;
    margin: 10px 0;
    position: relative;
  }
  
  thead tr th {
    background-color: gray;
    position: sticky;
    top: -2px;
  }
  
  thead {
    border: 1px solid black;
    line-height: 1.25;
    overflow: hidden;
  }
  
  td {
    border: 1px solid black;
    line-height: 1.25;
    overflow: hidden;
    padding: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class='sticky-table'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th rowspan="2"&gt;First column&lt;/th&gt;
        &lt;th colspan="3"&gt;Top of second column&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;One&lt;/th&gt;
        &lt;th&gt;Two&lt;/th&gt;
        &lt;th&gt;Three&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First cell&lt;/td&gt;
        &lt;td&gt;Second cell&lt;/td&gt;
        &lt;td&gt;Third cell&lt;/td&gt;
        &lt;td&gt;Fourth cell&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>