I'm trying to make a table scrollable with a fixed header with hover effect. I used this question to set my css file. I always got misaligned columns:
here is my Plnker demo:Plunker demo
any help please ?
update:
Add a comment
|
1 Answer
Your problem is that the display: block rule breaks table alignment.
Where you have:
.hoverTable tbody, .hoverTable thead { display: block; width: calc(100% - 17px); }
Remove that rule:
.hoverTable tbody, .hoverTable thead { width: calc(100% - 17px); }
You also have 9 th elements and 10 td elements. Place an empty th in at the end of the thead to equalize them.
7 Comments
mbenjemaa
thanks. but I think I have to keep
display: block because I need the make the table scrollable, right ? I removed it and my table became not scrollable
Ilya Streltsyn
In modern browsers, you can make the whole table a scrollable container and use
position:sticky to make the heading cells to stay at its top, like this: plnkr.co/edit/NFcutk7xKgXTKoSps21o?p=preview
mopsyd
Then you should use a different schema, like a Bootstrap grid. Tables are extremely finicky, and you will go way out into the weeds trying to equalize scrolling and also alignment, and wind up spending 10x longer than just doing it with Bootstrap or a similar grid library using divs.
mopsyd
@IlyaStreltsyn has a good approach if you are not supporting legacy browsers.
mopsyd
The problem you are having is that
display: block does not enforce vertical alignment between columns like display: table (default) does. You will need to remove display block and work around the remaining layout quirks, or use a non-table responsive layout to insure correct display across all browsers. The sticky option also requires removing display: block to render correctly. |