Safari position sticky in table cell

Question

My problem is that position sticky doesn' work in Safari when it is in a table cell. Is there a way to keep the table (as the second column sets the auto height on the sidebar) and also keep the sidebar content on the top?

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

The problem seems that Safari fails to recognize display:table-cell elements as potential containing block. This is probably a bug.

A workaround is to wrap your context div inside another display:block element to let Safari establish the containing block successfully for the inside 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>