css - 表行（：after）中的绝对定位元素不滚动

Question

对于一个客户，我正在改变他们网站的设计。我只能重写 CSS，我不能触摸 HTML。他们使用很多表格来展示他们的内容。当您单击表格行时，它会处于活动状态。使用绝对定位的:after元素，我在行尾添加了一个箭头，起初看起来不错。但是（即使我添加position: relative;到行中）当您向下滚动时箭头不会滚动。我添加了一个带有类似代码的 codepen 作为示例：

https://codepen.io/johnnynas/pen/oKoddz

是否可以通过仅更改 CSS而不更改 HTML来使箭头滚动？

.scroll-wrapper {
  height: 275px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 500px;
}

table {
  border-spacing: 0;
  font-family: sans-serif;
  line-height: 32px;
  width: 100%;
}

tbody tr:nth-child(odd) {
  background-color: #eee;
}

tbody tr.is-active {
  background-color: blue;
  color: white;
  position: relative;
}

tbody tr.is-active:after {
  border-color: transparent;
  border-left-color: blue;
  border-style: solid;
  border-width: 16px 0 16px 8px;
  content: "";
  height: 0;
  position: absolute;
  width: 0;
}

td {
  padding: 0 8px;
}

<div class="scroll-wrapper">
  <table>
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr class="is-active">
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</div>

标签： css