如何解决nth-child设置sticky的表格行hover时前两单元格无效果问题

你为前两列、最右第十二列的单元格设置sticky定位的同时，单独指定了background-color: white，该背景层级高于父元素tr，会覆盖tr的悬停背景色，导致视觉上这几个单元格没有触发悬停效果。

在你的CSS代码末尾补充以下样式，让sticky单元格在所属行悬停/激活时同步背景色即可：

/* 同步悬停状态下sticky单元格的背景色 */
.m-table tbody tr:hover td:first-child,
.m-table tbody tr:hover td:nth-child(2),
.m-table tbody tr:hover td:nth-child(12),
.m-table tbody tr:hover th:first-child {
    background-color: #F3F8F8;
}
/* 同步激活状态下sticky单元格的背景色 */
.m-table tbody tr:active td:first-child,
.m-table tbody tr:active td:nth-child(2),
.m-table tbody tr:active td:nth-child(12),
.m-table tbody tr:active th:first-child {
    background-color: #F4F5F6;
}

补充优化提示 #

你现有CSS中存在两处为th设置position: sticky; top:0和背景色的重复规则，可自行合并优化，不会影响当前功能运行。

内容的提问来源于stack exchange，提问作者Viet Quang Fresher