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>

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

0 个答案: