0

I am trying to make a table, while scroll comes in tbody there is a misalignment in thead and tbody column borders. Here is the example what I am trying to do: codepen table

With scrollbar, it is working fine.

while scrollbar is not in tbody there is some misalignment of borders. Is there any way to maintain the width of thead tr while scroll bar is present?

Animay
  • 602
  • 1
  • 7
  • 18
  • You shouldn't be using flexbox inside of a table: it defeats the purpose of table layout entirely. Anyway, the issue with your layout is that you are giving your `` element a width that is <100%. – Terry Aug 21 '20 at 09:46
  • just remove the width calc from the thead – Ahmed Sunny Aug 21 '20 at 09:47
  • @AhmedSunny if I remove the width the same problem appears while the scrollbar comes. – Animay Aug 21 '20 at 09:49
  • you may want to see : https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771 – G-Cyrillus Aug 21 '20 at 09:52
  • If hte link did not provide you any hints then, you may want to do `overflow-y: scroll;` instead `auto` for `tbody` ... also flex not needed here ;) https://codepen.io/gc-nomade/pen/qBZqPKG – G-Cyrillus Aug 21 '20 at 10:24

1 Answers1

2

First of all, try and use code snippets to display your code.

But your problem lies in your CSS on line 35:

thead tr {
  width: calc(100% - 17px);
}

You say there is a misalignment in your thead and tbody, that's caused because you are taking 17px off 100% on thead and not on tbody

Kai
  • 323
  • 2
  • 10