Safari вычисляет неправильную верхнюю позицию с указанием позиции в таблице при наличии нескольких тел

Question

У меня есть таблица, которая сгруппирована с несколькими элементами <tbody>, каждый из которых имеет одну начальную строку с элементом <th>, который озаглавил группу.Я не хочу, чтобы эти <th>: s были липкими, но я не могу заставить сафари установить правильную верхнюю позицию.

Если я установлю top: 0px или любое положительное значение на <th>: sв Firefox, Chrome и Edge он работает как положено, но в сафари я получаю 0px + высоту всех надписей и надписей.Это приводит к тому, что все <th>: s застревают одновременно значительно ниже верхней позиции прокрутки.

Я могу обойти эту проблему, выровняв таблицу, удалив элементы <tbody> и поместив все <tr>: s прямо под столом.Но это усложнит стилизацию, и в моем случае имеет смысл сгруппировать таблицу, поэтому я бы предпочел, чтобы мне не пришлось это делать.

У вас есть идеи, как это исправить или обойти?эта проблема?

Ожидается (Chrome, Safari и Edge):

Safari 12:

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;
}

<div>
  <table>
    <caption>The table</caption>
    <thead>
      <tr>
        <th>First col</th>
        <th>Second col</th>
        <th>Third col</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="3">Group 1</th>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th colspan="3">Group 2</th>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th colspan="3">Group 3</th>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Код ниже будет работать как для Safari, так и для Google Chrome.Хитрость заключается в том, чтобы изменить th на thead, а затем установить положение на липкое различными способами.position: -webkit-ms-sticky, position: -webkit-o-sticky, position: -webkit-sticky, position:sticky.

Также необходимо добавить две проверки в css для thead и во второй проверке найти каждого дочернего элемента этого тега thead дляубедитесь, что он также выбирает каждый дочерний тег в Chrome.

div {
  height: 200px;
  overflow: auto;
}

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

tbody thead {
  top: 20px;
}

thead {
  position: -webkit-sticky;
  position: -webkit-o-sticky;
  position: -webkit-ms-sticky;
  position: sticky;
  z-index: 1;
  top: 0px;
  background: white;
}

thead tr:nth-child(1) th{
  background: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

td {
  background: lightgray;
}

      <table>
        <caption>The table</caption>
        <thead>
          <tr>
            <th>First col</th>
            <th>Second col</th>
            <th>Third col</th>
          </tr>
        </thead>
        <tbody>
          <thead>
            <tr>
              <th colspan="3">Group 1</th>
            </tr>
          </thead>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
        </tbody>
        <tbody>
          <thead>
            <tr>
              <th colspan="3">Group 2</th>
            </tr>
          </thead>

          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
        </tbody>
        <tbody>
          <thead>
            <tr>
              <th colspan="3">Group 3</th>
            </tr>
          </thead>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
          <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
          </tr>
        </tbody>
      </table>