小编nej*_*mon的帖子

当有多个tbody时，Safari会计算出错误的顶部位置，并在表格中粘贴位置

我有一张表，表中包含多个<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;
}

Run Code Online (Sandbox Code Playgroud)

<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 …

Run Code Online (Sandbox Code Playgroud)

html css safari html-table sticky

nej*_*mon

lucky-day

11
推荐指数

1
解决办法

457
查看次数