Are scroll bars always the same width in different

Question

I need to make a CSS adjustment to compensate for a scroll bar. So I was wondering- are scroll bars always the same width in different browsers and operating systems?

I have two tables, one above the other, with matching columns widths (set to percentages). One table needs a scroll bar, so I want to add another column in the table above it to compensate for it, so the columns line up.

Answer 1

SWEET!Here's a solution for anyone who has this same problem. This should be cross-browser compatible too.

Just add a scroll bar to the top table as well, with some extra CSS to hide them.

#topTable{
    overflow: scroll;
    padding-right: 16px;
    padding-bottom: 16px;
    margin-right: -16px;
    margin-bottom: -16px;
}

In theory, all you have to do is make the "16px's" match, so you can do this with the same effect:

#topTable{
    overflow: scroll;
    padding-right: 100px;
    padding-bottom: 100px;
    margin-right: -100px;
    margin-bottom: -100px;
}

Answer 2

Scrollbars aren't even counted the same in different browsers, some of them put them inside the frame, while others put them outside (thus making alignment a real pain).

Try to think of a way of presenting the data where it won't matter.

Answer 3

I need to make a CSS adjustment to compensate for a scroll bar. So I was wondering- are scroll bars always the same width in different browsers and operating systems?

No, and on some systems their width is user configurable.