20260927-1650-docs-table-rendering Improve Markdown table rendering on the docs site

• status: completed
• createdAt: 2026-09-27 16:50
• approvedAt: 2026-09-27
• relatedTask: 20260927-1650-docs-table-rendering

Context

• 893 GFM tables on 242 published pages. Column counts: 2–4 columns 696, 5–8 columns 183, 9–13 columns 14. Thirteen tables exceed 30 rows (IAA exhibitor lists: 150–212 rows).
• Starlight 0.42 styles tables with display: block; overflow: auto on the <table> itself, a bottom border per cell, padding: 0.5rem 1rem, zero padding on the first and last column, and no header background, row striping or hover.
• src/styles/custom.css adds min-width: 6.5em per cell so CJK cells do not collapse, and tabular numerals in td.
• Pages are plain .md rendered by Sätteri. Starlight's Astro components (and any MDX table component) are inert in .md, so there is no "Markdown table component" to adopt without converting 242 pages to MDX. Sätteri hast plugins can restructure the output (ctx.wrapNode), which is the in-place equivalent.
• Because the <table> is its own scroll box, a sticky header cannot work, a narrow table does not get a full outer border, and there is no cue that a wide table scrolls.

Proposal

1. src/table-wrapper.ts: a Sätteri hast plugin that wraps every content <table> in <div class="table-wrap">. Registered in astro.config.mjs hastPlugins.
2. src/styles/custom.css, tables section rewritten:
   • The wrapper is the scroll box (overflow: auto; max-height: 80vh), with a 1px border and rounded corners; the table returns to display: table, border-collapse: separate.
   • Header row: gray background, position: sticky; top: 0 so it stays visible while a long table scrolls inside the wrapper. Short tables never reach max-height and do not scroll.
   • Body: zebra striping and row hover; cell padding 0.4rem 0.75rem on every column, including the first and last; vertical separators between cells.
   • Horizontal-scroll cue: edge shadows via the background-attachment: local technique (CSS only).
   • Keep min-width: 6.5em and tabular numerals.
3. src/components/MarkdownContent.astro: for a wrapper whose table overflows horizontally, add a small "full screen" button that opens the existing diagram-zoom dialog with a clone of the table. Tables are not click-to-zoom like images, because cells contain links and selectable text.

No Markdown source file changes.

Risks

• Long tables become an inner scroll region (80vh); wheel scrolling over them scrolls the table first. That is the price of a sticky header inside a horizontal scroll box.
• wrapNode behaviour inside Starlight asides and list items needs a build check.
• Dark and light theme colours both need checking; browser screenshots are not available in station (Chrome lacks system libraries), so visual verification runs in a sibling container or by the owner.

Alternatives

• CSS only, no wrapper: header background, striping and padding are possible, but no sticky header, no outer border and no scroll cue. Smaller change, lesser result.
• Client-side table library (sorting, filtering) for the exhibitor lists: not requested; can follow later if wanted.
• Convert pages to MDX to use components: rejected, 242-page migration for styling.

Steps

1. Add the hast plugin and register it -> verify: built HTML has div.table-wrap > table.
2. Rewrite the table CSS -> verify: screenshots of a 13-column, a 212-row and a 2-column table in light and dark theme.
3. Add the full-screen button -> verify: button appears only on overflowing tables, dialog opens and closes.
4. Quality gate: bun run docs:lint && bun run docs:build && git diff --check.