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

bug: <div> Table classes do not work with DaisyUI styles #2967

Closed
edeesis opened this issue Apr 9, 2024 · 6 comments
Closed

bug: <div> Table classes do not work with DaisyUI styles #2967

edeesis opened this issue Apr 9, 2024 · 6 comments

Comments

@edeesis
Copy link

edeesis commented Apr 9, 2024

What version of daisyUI are you using?

v4.10.1

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/Et3V8IwLRS

Describe your issue

When using the Display table classes as described here, the DaisyUI CSS styles aren't being applied.

This is similar to the request in #151, but since that one was closed for 2+ years, I decided to open a new one.

Copy link

github-actions bot commented Apr 9, 2024

Thank you @edeesis for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@saadeghi
Copy link
Owner

saadeghi commented Apr 9, 2024

daisyUI never claimed table class would work with divs. It only applies styles to standard HTML table tags.

But why use divs for table at all?

@edeesis
Copy link
Author

edeesis commented Apr 9, 2024

For one, standard HTML doesn't allow anchors inside a , the TailwindCSS folks suggest using the div with table class css styles: tailwindlabs/tailwindcss#3502

@edeesis
Copy link
Author

edeesis commented Apr 9, 2024

I wasn't sure whether this should be opened as a bug or a feature request, but you're right - a feature request would've been better.

@saadeghi
Copy link
Owner

Well, what you're trying to do is fighting the HTML standards and it's usually not a good idea in the first place.
Yes, this pattern has been used by some websites but it has side effects. First of all, using divs for a table is not going to be accessible as the HTML table tag. It will have problems with screen readers, keyboard navigation or even when copy pasting HTML content. Second, even if you make it work using JS and make it a accessible with some additional ARIA attributes and make it look like a table using CSS, it won't even be a pleasant experience for the user. If it's a table users should be allowed to interact with it like a table. This includes text selection (maybe for reading or maybe for copying the content)
If you make the whole row clickable, that would be problematic.

It's always a better idea to use HTML table tag for the table and I don't think using divs instead would be a good idea.

Let me know if you have any questions

@edeesis
Copy link
Author

edeesis commented Apr 10, 2024

Thanks for the response!

I don't disagree that using table tags is usually better, and it makes sense that y'all would only want to support the HTML tags.

Great work on the library, it's been really useful for me!

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

No branches or pull requests

2 participants