css - 表格单元格中的 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>