如何在 Safari 中制作粘性表格行

Question

我正在尝试显示一个 table，它显示了一些分组数据。

标题应该粘贴（在视口的顶部），以及一些包含组标题的表格行。

为简单起见，我在 Codepen 上创建了以下示例： https://codepen.io/andreivictor/pen/RwZRZav

我试过的代码是：

td.sticky {
  background: red;
  color: white;
  position: sticky;
  top: 50px;  // this is the header height
}

在 Chrome 和 Firefox 上运行良好。

问题是它在 Safari 中不起作用（在 Safari v14 上测试）；在 Safari 移动版中都没有。看截图： https://i.imgur.com/8NEgPYB.png - 该行是粘性的 - 但 top 的位置不同（相对于表格的顶部 - 而不是视口的顶部）。

Answer 1

根据MDN

粘性

.... 该值始终会创建一个新的堆叠上下文。

我最好的猜测是 safari 会考虑到前一个 position: sticky 元素（所以是表头）的堆叠上下文，并将 .sticky 定位在前一个位置的顶部 50px 粘性（而不是从容器的末尾）或类似的东西（我个人认为文档对此有点模糊，因此似乎没有必要错误的方法），但遗憾的是他们的行为方式不同。

This post 似乎也暗示在 Safari 上堆叠粘性定位元素有点奇怪：

...特别是 Sifiari 的双重粘性部分和元素的能力。

（Sifiari 是 Safari 的）

您可以查看最后一个链接中的讨论，但我不确定您是否会找到比使用不同的最高值更好的解决方法。您可以尝试使用类似

的选项

_::-webkit-full-page-media, _:future, :root .safari_only { ...

或is there a css hack for safari only?建议的其他选项

Answer 2

也许这会有所帮助：How to fix issues with CSS position sticky

Answer 3

您可以为所有 safari 浏览器使用 -webkit 前缀：

   position: -webkit-sticky;

table {
  border-collapse: collapse;
}
th,
td {
  padding: 1rem;
}
thead,
tfoot {
  background: #eee;
}
thead {
   position: -webkit-sticky;
  position: sticky;
  top: 0;
  border-bottom: 2px solid #ccc;
}

body {
  font: 110%/1.4 system-ui;
  margin: 0;
  padding: 10rem 2rem 50rem;
}

.sticky {
  background: red;
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  text-align: left;
}

.sticky--2 {
  background: indigo;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>

<table>
  <thead>
    <tr>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="sticky" colspan="5">Group Header 1 </th>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>

    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th class="sticky sticky--2" colspan="5">Group Header 2</th>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
  </tbody>
</table>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>