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

Table header first-child <th> is sticky by default #665

Closed
bherbruck opened this issue Mar 29, 2022 · 6 comments
Closed

Table header first-child <th> is sticky by default #665

bherbruck opened this issue Mar 29, 2022 · 6 comments

Comments

@bherbruck
Copy link

The table header first-child <th> tag is sticky and has left-0 by default. I think this should be optional (maybe a new CSS class) because it doesn't work well with responsive layouts when you don't want a sticky first column.

https://github.com/saadeghi/daisyui/blob/91ef44f1814fbea969af5f1fc50886a2fe611f8d/src/components/unstyled/table.css#L3-L
daisyui-table-header-sticky

@saadeghi
Copy link
Owner

It will look better if the first column of each row be <th> (not <td>)
Like the examples here: https://daisyui.com/components/table/

But you're right, it would be better if being sticky was optional. I will work on it

@saadeghi saadeghi added the table label Mar 29, 2022
@saadeghi saadeghi self-assigned this Mar 29, 2022
@NikarashiHatsu
Copy link
Contributor

How about adding sticky option for <th> and the first column of each row?
There are some cases where both could be used in a large data table.

@loreberti89
Copy link

How about adding sticky option for <th> and the first column of each row? There are some cases where both could be used in a large data table.

I have solved with little override in my CSS

.table th:first-child {
     position: relative !important;
}
.table.sticky th:first-child {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0px;
    z-index: 11;
}

Now if I want sticky I add class sticky on table

@StartedFromTheButton
Copy link

Hey I run into the same issue. @loreberti89 "solution" worked for me.

I would suggest removing the sticky default and adding a new options "table-sticky-header" wich results in every being sticky.

@saadeghi this issue has been open for some time. I could implement this if you don't mind :)

@panzerdp
Copy link

panzerdp commented Jan 11, 2023

Faced the same problem: I don't need the sticky behavior by default on the table. It would be great to make the header as non-sticky by default, but make it sticky using a special class like "table-sticky-header" (as suggested by @StartedFromTheButton).

@riuci-admin
Copy link

Same issue here, in my case if I don't add an empty th and a number then it takes the first column and make it sticky when scrolling horizontally. This does not make sense. Please fix this issue, shouldn't be that hard to fix

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

No branches or pull requests

7 participants