canonical / canonical/vanilla-framework

Cell background color is not applied properly on mobile table component

Open
#4,646 8 comments 0 reactions 0 assignees View on GitHub
P3 Triaged Triaged: Pragma
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**
While working on table using [Table / Mobile card](https://vanillaframework.io/docs/examples/patterns/tables/table-mobile-card) for ubuntu.com/pro.

Bug found here :
![image](https://user-images.githubusercontent.com/57550290/216442423-22b811d0-d241-455f-bc18-78ea782e3a2b.png)

This needs to look like this :
![image](https://user-images.githubusercontent.com/57550290/216442515-62b6609c-751e-4a37-abfb-dcf9e3664a7b.png)

I noticed when the background color is applied to `td`, the entire `td` cell background does not change because of the `tr` padding. I had to use custom styles locally to fix this. Should this be fixed in vanilla for future use? What do you think?

Screenshot 2023-02-02 at 4 13 50 pm

Contributor guide

Open the contributing guide

Research direction

Start with the Table / Mobile card example linked in the issue and inspect how padding on the mobile table's tr interacts with background colors applied to td. Compare the current rendering with the expected screenshot, then verify that the full cell background is covered without breaking the mobile table layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.