mkoryak / floatThead

Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
https://mkoryak.github.io/floatThead/
MIT License
1.22k stars 198 forks source link

Table headers block scrollbar when the scroll container has padding #437

Closed rickhoutman closed 1 year ago

rickhoutman commented 5 years ago

When the scroll container has left and/or right padding the width of the floatThead-container is not calculated correctly and the table headers are positioned over the scrollbar which makes the top of the scrollbar not usable.

Steps to reproduce:

JSFiddle: https://jsfiddle.net/rickhoutman/ptsh2y9L/4/

mkoryak commented 5 years ago

Yeah that looks like a bug, here is a workaround: https://jsfiddle.net/0fo643ry/1/

Let me know if that works for you.

rickhoutman commented 5 years ago

Yes, the workaround works, but also the scrollbar falls into the padding, so quite difficult to get styling correct this way.

mkoryak commented 5 years ago

Can you explain what you mean by that..

mkoryak commented 5 years ago

Ok, maybe I see what you mean. How about this: https://jsfiddle.net/7hgmxp9j/1/

rickhoutman commented 5 years ago

Yes, that is better. What I meant was that the scrollbar in my example was on the right side of the wrapper div and extended to the top and bottom of the wrapper and the table was padded into the wrapper.

burgoyne commented 5 years ago

What are the chances this would come up the exact day I have the same issue. Thank you both for this discussion. I was able to resolve my issues following along here.

mkoryak commented 1 year ago

I looked at all these fiddles and comments and I cannot see what the original issue was that were were talking about. Its possible that something was fixed in a browser, or maybe this was a windows scrollbar issue, and i am on a mac now. If someone knows what this is all about, feel free to reopen