Giters

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library

Home Page:https://daisyui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

edeesis opened this issue · comments

commented

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.

commented

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.

commented

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?

commented

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

commented

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.

commented

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

commented

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!