CSS styling for tables within content-switcher blocks

Summary

Tables within content-switcher blocks may have styling conflicts or readability issues due to the content-switcher's background colors and borders. Need to verify and improve table styling within versioned content blocks.

Current Behavior

Content-switcher blocks apply:

• Background color: color-mix(in srgb, var(--content-switcher-tint) 25%, #FFFFFF 75%)
• Border: 1px solid color-mix(in srgb, var(--content-switcher-tint) 50%, #FFFFFF 50%)
• Padding: .75rem 1rem

Tables inside these blocks may experience:

• Table borders blending with content-switcher borders
• Table header/row colors conflicting with background tint
• Reduced contrast for table text
• Striped table rows (if used) becoming less visible
• Table hover effects being masked

Examples to Test

::: {.content-switcher version="v2.0"}

| Feature | Status | Notes |
|---------|--------|-------|
| API v1  | Deprecated | Use v2 |
| Auth    | Stable | OAuth 2.0 |
| Webhooks| Beta   | In testing |

:::

::: {.content-switcher version="v3.0"}

## Version 3.0 Features {.unlisted}

Here's what's new:

| Component | Old Behavior | New Behavior |
|-----------|--------------|--------------|
| Parser    | Sync         | Async        |
| Cache     | Memory only  | Redis + Memory |
| API       | REST         | REST + GraphQL |

:::

Potential Issues

1. Border Conflicts

   • Table borders may not be visible against content-switcher background
   • Double borders where table edge meets content-switcher edge

2. Color Contrast

   • Table headers with background colors may clash with tint
   • Text in table cells may have insufficient contrast
   • Striped rows less distinguishable

3. Responsive Tables

   • Quarto's responsive table features may interact poorly
   • Horizontal scrolling within padded container
   • Overflow behavior unclear

4. Dark Theme

   • Table styling in dark mode needs verification
   • Border visibility in dark theme
   • Cell background colors in dark theme

5. Table Types

   • Grid tables vs pipe tables
   • Tables with column alignment
   • Tables with merged cells
   • Caption styling

Suggested Improvements

1. Dedicated Table Styling

   • Add specific CSS rules for tables within .content-switcher
   • Ensure table borders have adequate contrast
   • Adjust table background colors to work with tint

2. Border Adjustments

   • Remove or adjust table borders to prevent doubling
   • Use subtle borders that work with background

3. Spacing Improvements

   • Adjust padding/margin for tables within blocks
   • Ensure tables don't touch block edges
   • Handle table captions appropriately

4. Color Variables

   • Use CSS variables for table colors within content-switcher
   • Allow customization of table styling
   • Ensure WCAG contrast compliance

Test Cases

Test with:

• Simple pipe tables
• Grid tables with complex structure
• Tables with striped rows
• Tables with header rows
• Tables with column alignment (left, center, right)
• Wide tables (horizontal scroll)
• Tables in both light and dark themes
• Responsive table behavior on mobile
• Tables with Quarto styling classes
• Tables within callouts AND content-switcher (nested styling)

Related Issues

• #29 - CSS styling for callouts/notes (similar styling conflict concern)

Questions

• Should tables within content-switcher blocks have special styling?
• Should table backgrounds be transparent or have their own color?
• How should table borders interact with block borders?
• Are there specific Quarto table extensions that need testing?

Start by rendering the two Markdown examples and reviewing the listed test cases in light and dark themes, including nested callouts and wide tables. Inspect the existing .content-switcher styling and Quarto's table behavior. Done means the tested table types have readable contrast, non-conflicting borders, appropriate spacing, and usable responsive behavior.