0

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: enter image description here enter image description here

mbenjemaa
  • 79
  • 11

1 Answers1

1

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.

mopsyd
  • 1,877
  • 3
  • 20
  • 30
  • 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 – mbenjemaa Jul 10 '18 at 18:24
  • 2
    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: https://plnkr.co/edit/NFcutk7xKgXTKoSps21o?p=preview – Ilya Streltsyn Jul 10 '18 at 18:26
  • 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 Jul 10 '18 at 18:26
  • @IlyaStreltsyn has a good approach if you are not supporting legacy browsers. – mopsyd Jul 10 '18 at 18:29
  • thanks for both of you. I applied what @IlyaStreltsyn put in his demo, and i still get the same issue. I put 2 screenshots in my question to show the problem I want to solve. – mbenjemaa Jul 10 '18 at 18:46
  • just to clarify: the misalignment is solved. but the width of the table is not 100% – mbenjemaa Jul 10 '18 at 18:50
  • 1
    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. – mopsyd Jul 10 '18 at 18:51