react-component / react-component/table

Alternate row color in rc-table only works on hover!

Open
#997 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.4k
Forks
618
Avg merge
10h 19m
Merged PRs (30d)
2

Description

I'm using the rc-table component to display a table with alternate row colors. However, the background color of even rows only takes effect when I hover over them with the mouse. I've tried adding the CSS code table tr:nth-child(even) { background: #CCE8E8; }, but it doesn't seem to be working as expected.、
Can someone help me figure out why the even rows' background color only works on hover? Thank you!
CSS:
.rc-table table tr:nth-child(even){background:#CCE8E8!important;}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the alternate-row styling issue in the rc-table component using the reported .rc-table table tr:nth-child(even) selector, comparing normal and hover states. Trace the rendered table styles to identify why the even-row background is overridden, then verify that alternating backgrounds remain visible without hovering.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.