StackExchange / StackExchange/Stacks
`s-table__bx` has a 2px gap between cell borders
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 26
Description
Describe the bug
When using s-table__bx, it turns the appropriate right/left borders the color transparent. However, they still have their original width of 1px. This means that there is a 2px gap between borders:
To Reproduce
Zoom in on the example table:
https://stackoverflow.design/product/components/tables/#horizontal-borders
Or in Stack Overflow's post timeline:
https://stackoverflow.com/posts/50534533/timeline
Expected behavior
The horizontal lines should not have any breaks in them:
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Chrome
- Version: 105.0.5195.127 (Official Build) (64-bit) (cohort: Stable)
Additional context
🤠
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the s-table__bx styles and inspect the horizontal-borders example table at the linked Stacks documentation page. Reproduce the gap in a zoomed-in browser view, then verify that the horizontal lines between cells have no breaks and that the example and post timeline render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100