0

I have implemented my own fixed header table using simple JS logic (Can't use Pure CSS due to some restrictions):

Created two tables. One for header (It will not have scrollbar)

and one for table body(It have overflow as auto)

I have not mentioned width of columns explicitly as i wanted to have dynamic column width as per data.

I'm getting column's width by using following code:

 var col1 = document.getElementById("column1").offsetWidth;

And applying this width to header columns.

But when a scrollbar appears to a table(As table is of fixed height) then the offsetWidth returns different value than actual, and misalignment happens with header and body.

I tried parentWidth also. But again getting not getting width correctly.

Is there any way to get width of columns correctly when scroll appears ?

enter image description here

Tushar Pol
  • 7,119
  • 14
  • 29
  • 36
  • 1
    [Try looking at how the different width attributes work. It may help you understand what is going on.](https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively) You may be looking for scrollwidth. – Daniel Dees May 10 '18 at 06:21
  • How do you set the values of your table? Is it generated on the server or is it loaded at the client side. Can you capture the window resizing events and re-calculate de width of the columns then? And/or do the same when the data has been loaded if it is dynamic – duatis May 10 '18 at 06:35
  • Try `clientWidth` instead – Krzysztof Janiszewski May 10 '18 at 06:48
  • 1
    Thanks for suggestions! But then i had idea, I kept Overflow-y as scroll, and added padding right for header section. That tricked me. Now i'm only concerned about the width of scroll bar for different browsers. But that can be managed. @DanielDees Special thanks to you. – Tushar Pol May 10 '18 at 13:45

0 Answers0