html - 具有粘性标题重叠问题的表格

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;
} */

代码笔:https://codepen.io/Bishonen88/pen/rNaBRZp

Answer 1

尝试:

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