So the problem was when we put display:block to both thead and tbody , the auto alignment of header and body column breaks .In my case all the headers and content was dynamic and hence i did want to fix the width in any case.
This is a very common problem .Though i found a solution which works for me .
https://github.com/nheldman/jquery.scrollTableBody

This is a plugin which replicates the header and places a fixed header on top of the moving header. So our thead scrolls with the tbody which is actually hidden and the duplicate thead which is wrapped inside another table is fixed at that particular position .

Javascript Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yash Sharma

Yash Sharma

Javascript Developer

More from Medium

#20 Nothing is free

Focus! I’m watching you!

Me vs Insecurity