How to prevent table body scroll bar from offsetting header columns?

Question

Probably best explained with pictures:

Before the scroll bar appears (everything is fine):

After the scrollbar appears (headers offset)

code

score 1 · Answer 1 · answered Jan 23 '18 at 16:18

1

One way to approach this is simply set the width of the tbody to > 100% so that the tbody has extra width for creating the scrollbar. like this:

.outerTable tbody {
  height: calc(100vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
  width:102%;
}

answered Jan 23 '18 at 16:18

Jonathan Chaplin

This didn't work for me. Now it causes the opposite problem where the headers are initially offset (before the scroll bar appears). Also when the scroll bar appears it's off-screen. – John Smith Jan 23 '18 at 16:21
1

I found this post, hopefully it helps you. https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe – Jonathan Chaplin Jan 23 '18 at 16:40

score 0 · Answer 2 · answered Jan 23 '18 at 17:24

0

This worked for me. I only need to support Chrome so it's fine:

overflow-y: overlay;

answered Jan 23 '18 at 17:24

John Smith

2 Answers2