Could you please explain why you are using two different divs, instead of putting all of this in one table. If it were in a single table, then the cells would line up.
Then leave it out. The technique is still the same.
The only real solution to your problem using 2 tables is to use the table-layout:fixed algorithm (applied to the table element) and then give a width to each cell in both tables (both tables must be the same and then they will obey the widths that are set). It is not possible to make 2 unrelated elements keep track with each other automatically.
In the link TechnoBear gave one of the first methods mentioned (without js) will work for fluid width table headers but comes with a few caveats, Read the thread for more details.
In the end the only real wy to do this effectively is with js and there are plenty of examples in that thread or on the web that can accomplish this (mine is better than most but all come at a price in one way or another).
okay Paul,
thanks for the detailed explanation. I’ll surely give it a detailed look.
Since I’m using bootstrap 3 …is there anything from there on the plate to reuse and try in my existing code as a trial ? any benefit from bootstrap 3 in this regard ?
I believe bootstrap has a sticky header method so you could utilise that but you would still need to size the table-cells to be the same in both the header and table. There are some bootply examples but I believe they are percentage width also.
Fixed table headers unfortunately are never easy to implement.
If the goal is to have the table header not move out of view on a long table (what was that column again?) maybe repeating the table header every several rows would be an approach that would work.