Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix table text alignment #346

Merged
merged 1 commit into from
Aug 7, 2024
Merged

Fix table text alignment #346

merged 1 commit into from
Aug 7, 2024

Conversation

lopez-marc
Copy link
Contributor

After this commit, text alignment in tables no longer works as intended. It appears that text-align: start; does not apply correctly to the table tag.

To address this, I propose applying text-align: start; directly to the th and td tags, ensuring correct alignment.

Copy link

vercel bot commented Apr 10, 2024

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

Name Status Preview Comments Updated (UTC)
tailwindcss-typography ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2024 0:41am

@adamwathan
Copy link
Member

Hey! Can you explain more what you mean when you say it doesn't apply properly? Looking at our demo site the alignment looks correct to me and has the correct computed style:

image

@lopez-marc
Copy link
Contributor Author

Thanks for the quick answer! I hope the following examples are useful to understand my point:

Before the mentioned commit was set left and this was the result:
Bildschirmfoto 2024-04-10 um 17 33 22

How is currently with start the headers are centered:
Bildschirmfoto 2024-04-10 um 17 33 10

This is how it looks with my proposed change:
Bildschirmfoto 2024-04-10 um 17 36 56

And for debugging purposes, if I change in my PR to end:
Bildschirmfoto 2024-04-10 um 17 37 31

@adamwathan
Copy link
Member

Ah I see now, that is absolutely bizarre! 🤯 That almost seems like a browser bug but it's the same in all browsers so there must be a reason. Tweeted about it in case anyone who follows me happens to possess this arcane knowledge:

https://twitter.com/adamwathan/status/1778098728601055467

I think the reason we did this on the table element was to avoid specificity issues or something, wish I could remember exactly why but I have a vague memory of it being important 🤔 Will have to think about if there's a case where it's an issue.

@caendesilva
Copy link

Hey @adamwathan! After updating a minor version of this plugin, the table headers in HydePHP are now center aligned instead of left aligned. This was caught by our Browserstack integration. See hydephp/develop#1689

You can also view our public Browserstack page where this was caught https://percy.io/9d5269d1/hydephp/builds/33912142/changed/1856671999

image

@caendesilva
Copy link

I can confirm that @lopez-marc's proposed changes work as intended. Here is their patch applied to the HydePHP testing fixture:

image

Copy link

@caendesilva caendesilva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes are confirmed to have fixed this problem in HydePHP.

caendesilva added a commit to hydephp/develop that referenced this pull request Jun 30, 2024
caendesilva added a commit to hydephp/develop that referenced this pull request Jun 30, 2024
caendesilva added a commit to hydephp/develop that referenced this pull request Jun 30, 2024
@reinink reinink merged commit 815dfc4 into tailwindlabs:master Aug 7, 2024
4 checks passed
@reinink
Copy link
Member

reinink commented Aug 7, 2024

@lopez-marc Hey thanks for this fix! 🙏

@reinink reinink changed the title Fix for the table text-align: start Fix table text alignment Aug 7, 2024
@lopez-marc
Copy link
Contributor Author

@reinink Happy to contribute!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants