logo标签列表

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

csssafarimobile-safari
5

我试图展示一个显示分组数据的 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（测试版本为v14）中不起作用，也不适用于Safari移动端。请见截图：https://i.imgur.com/8NEgPYB.png - 悬停行的位置固定，但top位置与表格顶部不同（而不是视口顶部）。

只是为了确认一下：如果您在粘性类中使用top: 0而不是top: 50px，它是否适用于Safari？ - Berci
是的，看起来解决方案是safari使用top: 0，其他浏览器使用top: 50px。但这似乎是某种hack方法，我也在尝试理解为什么safari会出现这种情况。 - andreivictor
3个回答
1
根据MDN：

sticky

……此值始终创建新的堆叠上下文。

我的最佳猜测是Safari会考虑先前的position：sticky元素（如表头）的堆叠上下文，并将.sticky放置在先前的position：sticky（而不是容器末尾）50像素处，或类似的位置（我个人认为文档有点模糊，所以似乎没有必要错误的方式），但它们的行为不同，这真是太遗憾了。 这篇文章 也似乎表明，在Safari上堆叠粘性定位的元素有点奇怪：

……特别是Sifiari的能力可以使一个部分和元素倍增。

（其中Sifiari是Safari的缩写）
您可以查看最后一个链接中的讨论，但我不确定您是否会找到比使用不同的顶部值更好的解决方法。不过，您可以尝试使用以下选项：
这是一段 CSS 代码，用于针对 Safari 浏览器进行样式设置。其中包含了 `-webkit-full-page-media` 和 `_:-webkit-full-page-media` 两个属性选择器，以及 `_:future` 和 `:root .safari_only` 两个类选择器。另外，该代码还提到了可能存在的其他选项，可以参考链接 is there a css hack for safari only? 。
0

你可以在所有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>

它有相同的问题：https://i.imgur.com/8NEgPYB.png - andreivictor
0
1
请引用所引用网站的相关部分。这将帮助提问者（以及未来的观众）更快地找到要查看的内容并解决问题。保留外部参考资料-最佳答案会在外部来源中引用更多信息！更多信息请参见：https://stackoverflow.com/help/how-to-answer - saraf.gahl
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接