Open
Description
Describe the bug
When using a table caption with the .usa-sr-only class, the border between the heading and body cells is no longer collapsed, causing a visual bug where the border appears to be 2px wide instead of 1px.
It looks like position: absolute attribute on the caption affects the how border-collapse behaves on the table for some reason.
https://jsfiddle.net/en9tbg4a/
Steps to reproduce the bug
- Create a table with at least one heading and body cell
- Add a
captionto the table - Add
.usa-sr-onlyto the caption
Expected Behavior
My expectation is that the border size between the header and body cells is the same regardless when using a caption, a caption with .usa-sr-only, or no caption. By default, seems like it should visually be 1px.
Related code
No response
Screenshots
No response
System setup
- USWDS Version: 3.12
- Device: Macbook Pro
- Operating System: MacOS 15.5
- Browser: Brave; Version 1.76.82 Chromium: 134.0.6998.178 (Official Build) (arm64)
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.