如何在 Safari 中制作粘性 table 行

Question

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

header 应该固定（在视口的顶部），还有一些包含组标题的 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 位置不同（相对于 table 的顶部 - 而不是视口的顶部）。

Answer 1

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

Answer 2

您可以为所有 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>

Answer 3

根据MDN

sticky

.... This value always creates a new stacking context.

我最好的猜测是 safari 考虑了之前 position: sticky 元素的堆叠上下文（因此 table header）并将 .sticky 50px 顶部放置在以前的位置是粘性的（而不是从容器的末端）或类似的东西（我个人认为文档对此有点模糊，所以它似乎不是必要的错误）但很遗憾他们的行为不同。

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

...Particularly Sifiari’s ability to double sticky a section and element.

（Sifiari 的是 Safari 的）

您可以查看上次 link 中的讨论，但我不确定您是否会找到比使用不同的最高值更好的解决方法。您可以尝试使用

之类的选项

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

或is there a css hack for safari only?

建议的其他选项

如何在 Safari 中制作粘性 table 行

How to make sticky table rows in Safari

css

safari

mobile-safari