daisyui icon indicating copy to clipboard operation
daisyui copied to clipboard

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

Open bherbruck opened this issue 4 years ago โ€ข 4 comments

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

bherbruck avatar Mar 29 '22 12:03 bherbruck

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 avatar Mar 29 '22 18:03 saadeghi

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.

NikarashiHatsu avatar Apr 05 '22 07:04 NikarashiHatsu

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

loreberti89 avatar Aug 18 '22 14:08 loreberti89

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 :)

StartedFromTheButton avatar Oct 06 '22 15:10 StartedFromTheButton

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).

panzerdp avatar Jan 11 '23 19:01 panzerdp

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

riuci-admin avatar Mar 27 '23 01:03 riuci-admin