[Bug] Add background to selectable <tr> table elements

[eryc-cc]

Summary

We need to add a background to the <tr> elements on hover/click.

The problem is: border-radius doesn't work with <tr> elements, and the ::before approach is not working.

Requires more CSS testing.

Original comment:

No need to add a border, just the border-radius, I think in tailwind is rounded
Maybe rounded-sm? Should be 4-6px max... more than that will look too rounded

Added the border radius but it doesn't seem to affect the highlight. I'm using background color for the highlight so that might be the issue.

Ugh, tables are so annoying to work with... 😅

Here's the problem: border-radius doesn't work on <tr> elements: https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row

Try something like this:

<tr className={`before:content-['${title}'] before:block before:absolute before:-inset-1 before:bg-blue-100 before:opacity-0 hover:before:opacity-1 before:rounded transition ease-in-out relative cursor-pointer`} key={index} onClick={(event: any) => {

Originally posted by @pixelsbyeryc in #177 (comment)

[0-vortex]

Definitely never use tables :D

[OgDev-01]

What if I switch the table into a div and avoid the use of tr and td, will that be an acceptable solution?

Just a suggestion b4 I dive deep into this issue🙌

[eryc-cc]

What if I switch the table into a div and avoid the use of tr and td, will that be an acceptable solution?

Just a suggestion b4 I dive deep into this issue🙌

I think that's what we should do... What do you think, @chadstewart?

[chadstewart]

What if I switch the table into a div and avoid the use of tr and td, will that be an acceptable solution?
Just a suggestion b4 I dive deep into this issueraised_hands

I think that's what we should do... What do you think, @chadstewart?

Probably for the best. I'm already avoiding using table html elements because of this issue.

[github-actions]

🎉 This issue has been resolved in version 1.4.0-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀