如何让HTML表格最后一列不继承偶数行灰色背景样式？

你可以通过在偶数行的最后一个<td>上单独设置白色背景，来覆盖行的灰色背景样式，具体修改TR组件的代码即可：

export const TR = styled.tr`
    :nth-child(even) {
        background-color: #e5eaee;
        // 针对偶数行的最后一列设置白色背景
        td:last-child {
            background-color: #ffffff;
        }
    }
`;

原理说明 #

表格行(<tr>)的背景色会被其内部单元格(<td>)的背景色覆盖。我们利用CSS的td:last-child伪类选中每一行的最后一个单元格，然后在偶数行的样式规则里，给这个单元格强制设置白色背景，就能让最后一列不受行背景色的影响，保持原本的白色。

这种方法不需要修改你的JSX结构，只需要调整样式代码即可实现需求，适配你当前border-collapse: separate的表格布局设置。

内容的提问来源于stack exchange，提问作者boogiehsows