Improved table element styles & fixed table styles inside asides

[SnowDingo]

This PR brings two changes to Astro Starlight:

1. It closes Tables in Asides #1725, which addresses the broken style in the table inside the aside element.
2. It also adds new styling to the table element in Astro, with most of this part of the code from @delucis.

Here are sample images of the new styling:

[changeset-bot]

🦋 Changeset detected

Latest commit: c8da560

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Jul 5, 2024 9:28am

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

Locale	File	Note
en	guides/tables-test.md	Source added, will be tracked.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[delucis]

Thank you @SnowDingo! I made some changes as I think there were some conflicts between the styles you applied and other recent CSS changes to other bits of Starlight and I removed the background striping to match my example StackBlitz.

I’ve temporarily added a test page to the Starlight docs on this branch so people can view the result for a range of examples and check it in both light and dark mode: https://starlight-git-fork-snowdingo-main-astrodotbuild.vercel.app/guides/tables-test/

I’m personally happy with this, but would love to hear feedback from anyone else who has thoughts!

[lorenzolewis]

For me it seems like the blue border is a bit too red and in the purple-ish territory instead of blue.

Light	Dark

[sarah11918]

Looks great! Some really nice styling here!

[evadecker]

Agree with @lorenzolewis about the blue dividers having a purple tint.

The header row divider feels too strong; I would lower the opacity or match the tint of the header text for the aside.

The final divider of the table is subtly lighter than all the other dividers.

In addition, it could be nice to remove the start and end inline padding of the first and last column of the table so the text aligns with the dividers and with other surrounding paragraphs!

[delucis]

Thanks for the reviews folks — super helpful! I will play around with the header border and inline padding @evadecker 🙌

The final divider of the table is subtly lighter than all the other dividers.

@evadecker Could you share a bit more about the browsers/hardware you’re using? I’ve checked a bunch of different browsers on macOS and can’t see the same thing. Wondering if its a subpixel antialiasing effect at a specific resolution 🤔

[evadecker]

Thanks for the reviews folks — super helpful! I will play around with the header border and inline padding @evadecker 🙌

The final divider of the table is subtly lighter than all the other dividers.

@evadecker Could you share a bit more about the browsers/hardware you’re using? I’ve checked a bunch of different browsers on macOS and can’t see the same thing. Wondering if its a subpixel antialiasing effect at a specific resolution 🤔

First noticed on iOS Safari and the issue is present on macOS Safari as well. Not present on Chrome.

The issue seems to stem from border-collapse: collapse in combination with the semitransparent border colors.

Removing that rule and adding border-spacing: 0 fixes the issue.

CleanShot.2024-06-29.at.10.00.41.mp4

[delucis]

OK, made two more changes based on @evadecker’s feedback:

1. Removed the inline padding at the start and end of each row.
2. Simplified the colours by using the same colour for the heading row divider as the rest of the rows.

Before	After

[evadecker]

Looks great! Excited to see this go live!

[lorenzolewis]

Yes, looks perfect now for me in the always-problematic browser that is Safari 😉

[SnowDingo]

Yes, looks perfect now for me in the always-problematic browser that is Safari 😉

Does anyone know if this PR is ready to go?
If not, since I couldn't catch up to the comments, it would be conducive if someone could create a list of changes we must make before merging this PR.

[libreom]

Not so good

[delucis]

Does anyone know if this PR is ready to go?

@SnowDingo Yes! Good to go. We will merge it when we are ready for the next release. Should be later this week. Thanks again!

[SnowDingo]

Does anyone know if this PR is ready to go?

@SnowDingo Yes! Good to go. We will merge it when we are ready for the next release. Should be later this week. Thanks again!

@delucis , no problem👍
I can't wait to see our new styling in starlight!!