表格行伪元素使用position: sticky在Safari中的兼容问题

问题根源 #

Safari对表格行（<tr>）伪元素的position: sticky支持存在兼容性缺陷，因表格行采用特殊布局模型，伪元素无法正确识别并应用sticky定位规则。

可行解决方案 #

方案1：改用最后一个表格单元格实现（推荐）

放弃伪元素，直接利用表格最后一个<td>实现固定标签，这是Safari原生支持的稳定方案：

修改后的HTML：

<table class="tableContainer">
  <tbody>
    <tr class="tableRow">
      <td class="tableHead">Workflow Title</td>
      <td class="tableHead">Description</td>
      <td class="tableHead">Tags</td>
      <td class="tableHead">Total Steps</td>
      <td class="tableHead">Input Tokens</td>
      <td class="tableHead">Created Date</td>
      <td class="tableHead">Last Modified</td>
      <td class="tableHead">Status</td>
      <td class="tableHead">Owner</td>
      <!-- 用最后一个td替代伪元素 -->
      <td class="sticky-tag">S</td>
    </tr>
  </tbody>
</table>

对应CSS：

.tableContainer {
  min-width: 1200px;
  overflow-x: auto;
}

.tableHead {
  padding: 2px 4px;
  min-width: 100px;
}

.sticky-tag {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: red;
  z-index: 1;
}

方案2：修改表格行布局兼容伪元素（不推荐，易破坏布局）

若无法修改HTML结构，可强制调整表格行布局，让伪元素能生效，但可能引发其他表格布局问题：

.tableContainer {
  min-width: 1200px;
  overflow-x: auto;
}

.tableRow {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.tableRow::after {
  content: 'S';
  display: table-cell;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: red;
  z-index: 1;
}

.tableHead {
  padding: 2px 4px;
  display: table-cell;
  min-width: 100px;
}

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