Safari calculates wrong top position with position sticky in table when there are multiple tbodies : <p>I have a table that is grouped with multiple <code>&lt;tbody&gt;</code> elements, each one having one initial row with a <code>&lt;th&gt;</code> element that titles the group. I wan't these <code>&lt;th&gt;</code>:s to be sticky but I can't get safari to set the correct top position.</p>

<p>If I set <code>top: 0px</code> or any positive value on the <code>&lt;th&gt;</code>:s it works as expected in Firefox, Chrome and Edge but in safari I get 0px + the height of all above tbodies and caption. This results in all <code>&lt;th&gt;</code>:s getting stuck at the same time well below the top scroll position.</p>

<p>I can work around the problem by flattening the table, removing the <code>&lt;tbody&gt;</code> elements and putting all <code>&lt;tr&gt;</code>:s directly under the table. But that would complicate styling and it makes sense for accessibility to group the table in my case so I'd prefer if I didn't have to do that.</p>

<p>Do you have any ideas how can fix or work around this problem?</p>

<p>Expected (Chrome, Safari and Edge):</p>

<p><a href="https://i.stack.imgur.com/bhip0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bhip0.png" alt="Works in Chrome, Safari and Edge"></a></p>

<p>Safari 12:</p>

<p><a href="https://i.stack.imgur.com/OpA17.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OpA17.png" alt="Doesn&#39;t work in Safari 12"></a></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>div {
  height: 200px;
  overflow: auto;
}

td, th {
  border: 1px solid gray;
}

th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
}

tbody th {
  top: 20px;
}

td {
  background: lightgray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;table&gt;
    &lt;caption&gt;The table&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;First col&lt;/th&gt;
        &lt;th&gt;Second col&lt;/th&gt;
        &lt;th&gt;Third col&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;Group 1&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;Group 2&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;Group 3&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;foo&lt;/td&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
