thoughtbot / thoughtbot/roux

<th> tags in <tbody> and <tfoot> don't look great

Open Beginner friendly
#16 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
CSS
Stars
93
Forks
4
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
W3C recommends using <th scope="row"> to row cells that indicate the subject of the row. But when I do this, these row cells are styled like thead cells and rounding in the footer is wonky.

before

Image

after

Image

To Reproduce
Steps to reproduce the behavior:

Edit the Roux Components basic table example: the first cell in each <tr> changes from <td> to <th scope="row">

Expected behavior
<tr> cells in the table body or footer are either styled exactly like normal <td> cells, or are minimally highlighted to indicate that they're the subject of the row.

Additional context
Add any other context about the problem here.

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 with the Roux Components basic table example linked in the issue, changing the first body and footer cells to as described. Trace the table styles that affect those cells and verify that body and footer row headers match normal cells or have only a minimal subject-of-row highlight, with correct footer rounding.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.