Firefox中Table Sticky Header失焦后消失问题求助

问题背景 #

我想用纯CSS实现表格表头的粘性效果，当前代码在滚动时表头能固定在顶部，但在Firefox浏览器中，光标移出表格或元素失焦后，粘性表头会消失，只有继续滚动才会重新出现。

原有代码 #

CSS代码

table {
  border:1px solid black;
  border-collapse:collapse;
  width: 600px
}

th {
  border:1px solid green;
  padding: 6px 10px;
  background: green;
  color: #FFF
}

td {
  border-bottom: 1px solid green;
  border-left: 1px solid green;
  padding: 6px 10px;
}

tr.sticky {
    z-index: 99;
    position: sticky;
    top: 0;
}

HTML代码

<table>
<tr class="sticky">
  <th>Th1</th>
  <th>Th2</th>
  <th>Th3</th>
</tr>
<tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
</tr>
<tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
</tr>
<!-- 省略重复表格行 -->
<tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
</tr>
</table>

修复方案 #

该问题源于Firefox对表格元素上position: sticky的渲染bug，以下两种纯CSS方案可解决：

方案一：给表格添加table-layout: fixed #

给<table>元素添加固定布局属性，强制浏览器采用统一的表格渲染规则，修复粘性表头的失焦消失问题：

table {
  border:1px solid black;
  border-collapse:collapse;
  width: 600px;
  table-layout: fixed; /* 新增属性 */
}

/* 其余样式保持不变 */

方案二：将粘性定位移至<th>元素 #

把position: sticky从表格行转移到表头单元格上，绕过Firefox对表格行的粘性渲染bug：

th {
  border:1px solid green;
  padding: 6px 10px;
  background: green;
  color: #FFF;
  position: sticky; /* 移至th元素 */
  top: 0;
  z-index: 99;
}

/* 移除tr.sticky相关样式 */

以上两种方案均能让表头在光标失焦或停止滚动时保持粘性，且完全基于CSS实现。

内容的提问来源于stack exchange，提问作者Jay.