Skip to content

Conversation

@jzempel
Copy link
Member

@jzempel jzempel commented Aug 1, 2025

Description

Fixes missing header border treatment in Safari. While I'm not loving taking the box-shadow border out of the thead block and applying it to the individual th elements, Safari will not display it with a sticky header + Garden tables designed around border-collapse: collapse.

Detail

Technically, this was broken in Safari for v8 scrolling tables with #1482. And subsequently spread to all Safari tables with the v9 color work and styling simplification in #1833.

Checklist

  • 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • ⚫ renders as expected in dark mode
  • 🤘 renders as expected with Bedrock CSS (?bedrock)
  • 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
  • tested for WCAG 2.1 AA accessibility compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@jzempel jzempel requested a review from a team as a code owner August 1, 2025 20:50
@jzempel jzempel changed the title fix(tables): cross-browser border styling for sticky headers fix(tables): cross-browser border styling for headers Aug 1, 2025
@jzempel jzempel merged commit 9286139 into main Aug 1, 2025
9 checks passed
@jzempel jzempel deleted the jzempel/table-header branch August 1, 2025 21:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants