Html table
after adding scroll overflow to tbody, the th and rd alignment breaks, how do I fix this
29 Replies
Can you please give the post an appropriate title and add the codepen link to your post body? Thanks!
sorry wait
this is what I want
You are doing some wild constraints on your table elements
https://codepen.io/b1mind/pen/zYjJEzN?editors=1100
how can i add the scroll then
idk start with a good start though
There is so much going on with your code, to many things you are defining that get in the way
like display: table you don't need on tables
lots of widths
yes, but i needed scroll on tbody, so this is what i found on stack overflow
ok try that with my pen then
tried it but it breaks the column
it works fine if the colspan is 1 for every cell, but some of the cell in my table has colspan 2
pretty sure that comes from the fixed table layout
i tried removing it
still the same
Yea idk seems like a odd usecase, seems like a hacky solution
Assuming you want this so thead stays fixed while scrolling through tbody?
yes
Fixed Table Headers with Pure CSS: Sticky On Scroll
Fixed table headers are the perfect solution for retaining the column and row header views for tables with large amounts of data.
quick glance this looked like a decent solution
ok, ill try this
updated my pen, this feels way less hacky 😄 let the body scroll!
ok so works when th reaches the top of the window right?
in this demo it works just inside the container
not sure what you mean inside the container?
in this the sticky th works inside this container, it doses not have to reach top of the window to be sticky
If that is the second example they used
left: 0;
you can control where it sticksok, let me try
oh sorry I just skimmed it
that is different example
updated my pen to help you understand whats happening there better maybe
https://codepen.io/b1mind/pen/zYjJEzN?editors=1100
https://codepen.io/aldrinbright/pen/PoedOwY
check this, now I have content above the table, so the sticky works only when it reach the top of the window
yup that is how sticky works!
also unlike fixed it will keep its space in the dom
in this example it works different
not it does not look at the dom
look at your dom
Its real important to realize boxs in boxs and how parent/child relation works
ok