Safari 位置粘在表格单元格中

Question

我的问题是，当它位于表格单元格中时，位置粘性在 Safari 中不起作用。有没有办法保留表格（因为第二列设置侧边栏上的自动高度）并将侧边栏内容保留在顶部？

table {
    width: 100%;
    table-layout: fixed;
}
td{
    vertical-align: top;
}
.second {
    height: 3000px;
    background: #f00;
    width: 70%;
}
.sidebar div {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 200px;
    background: #000;
}

<table>
    <tr>
        <td class="sidebar">
            <div></div>
        </td>
        <td class="second"></td>
    </tr>
</table>

Answer 1

问题似乎 Safari 无法将display:table-cell元素识别为潜在的包含块。这可能是一个错误。

解决方法是将上下文 div 包装在另一个display:block元素内，以便 Safari 为内部 div 成功建立包含块。

.table{
  height:1000px;
  width:200px;
}
.containing-block {
  height: 100%;
  border: 1px solid;
}
.text-content {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(255,220,200,0.5);
 }

<table class="table">
  <tr>
    <td>
      <div class="containing-block">
        <div class="text-content">
          I'm first-child-sticky
        </div>
      </div>
    </td>
  </tr>
</table>