1
I’m trying to create a table that by scrolling down the page, the column row is fixed at the top.
So far so good, in jQuery I set in the scroll event that when the columns were below offset, it would change the columns' Position to FIXED and POSITION TOP 0px, and it works, it sticks to the top and accompanies the scrolling.
The problem is that when scrolling the page, the element TH changes size, it does not follow table rows.
I tried to force the element’s CLASS TH and TD being the same, in order to get the size of the same location. Even so when scrolling down the page, the element loses some pixels.
Within the class of TH and TD, added
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
so that the padding does not influence its size, and also did not work.
Does anyone know what it can be?
You can post one Jsfiddle? I would guess that the ideal is not to change the style of TH - take it out of the flow of the page with
position: fixedrisks changing the layout of the table - but clone the TH into a <div> (withdisplay: table-row, maybe?).– user25930