CSS＆＃34;职位：粘性＆＃34;在Microsoft Edge中应用水平偏移

Question

我尝试将粘性表标题与其下方的内容对齐。结构如下所示：

<div class="wrap" id="wrap">
  <div class="sticky-header" id="header_div" style="z-index:1">
    <table class="table" id="header_table">
      <thead id="thead_table">
        <tr>
          <th id="date_header">Date</th>
          ...
        </tr>
      </thead>
    </table>
  </div>
  <div>
    <table class="table" id="body_table">
      <thead id="tbody_table">
        <tr>
          <th id="date">Date</th>
          ...
        </tr>
      </thead>
    </table>
  </div>
</div>

我不知道我的列的大小或表格将有多少列，以便保持对齐我有一个Javascript动态设置所有宽度的大小。

我遇到的问题是，在Edge中，只有粘性属性才会应用水平偏移。所以在Chrome中，事情看起来像这样： Chrome

但在Edge中它看起来像这样： Edge

如果我在开发者工具中切换粘性位置，它会快速回到中心，一切都保持一致，但它显然会失去它的粘性功能。任何人都能解释一下吗？

注意：我在切换z-index（即z-index仅在Edge中应用水平偏移）时在其他页面上看到了类似的行为，但我能够为那些找到解决方法...地球是边缘做的吗？