具有粘性标题重叠表

Question

当有一张桌子时，我遇到了单元格重叠的问题。我希望单元格没有任何背景色。当我粘贴第一列以使其保持在原位时，当我在其上滚动时，其他值将与其文本重叠。 我可以通过为标题提供任何背景色（例如白色）来解决此问题。这样做的问题是，我希望对整个行都具有悬停效果，如果已经为th提供了自己的背景色，则该效果不起作用。

HTML

<div style="width: 200px; overflow: auto;">
    <table>
        <tr>
            <th class="header">Hello</th>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
            <td>Value<td/>
        </tr>
    </table>
</div>

CSS

.header {
  position: sticky;
  left: 0;
}

tr:hover {
  background-color: red;
}

/* th {
  background-color: white;
} */

codepen：https://codepen.io/Bishonen88/pen/rNaBRZp

Answer 1

尝试：

tr:hover > td {
  background-color: red;
}