Column are shifting when there is vertical scroll bar attached

Question

I don't understand why the table headers are shifting when there is vertical scroll bar attached to table.

Here is my html code:

<div  >
        <ul class="nav nav-tabs" id="tab123" style="margin-top: 26px;">
            <li><a href="#div1" data-toggle="tab" >Tab1</a></li>
            <li><a href="#div2" data-toggle="tab"  >Tab2</a></li>

        </ul>

        <div class="tab-content"  style="overflow: hidden; margin-left: 20px; height: 504px;">
            <div  id="div1"  class="tab-pane">


                <div  style="overflow: hidden;margin-top: 10px;"  >

                    <table  style="width: 100%" border = "1">

                        <thead><tr>

                                   <th style="padding: 0px;width: 0px;visibility: hidden"></th>
                                   <th style="padding: 0px;width: 130px;text-align: left">Text1</th>
                                   <th style="padding: 0px;width: 181px;text-align: left">Text2  </th>
                                   <th style="padding: 0px;width: 85px;text-align: left">Text3   </th>
                                   <th style="padding: 0px;width:0.5px "></th>
                                   <th style="padding: 0px;text-align: center;width: 70px">Text5</th>
                               </tr>

                        </thead>

                    </table>

                </div>

                <div  style="overflow: auto;height: 50px;" class="tab-pane">
                    <table id ="tblSysDetails"   style="width: 100%;float: left" border ="1">

                        <tbody >

                            <tr >

                                <td   style="padding: 0px;width: 0px;visibility: hidden"  ></td>
                                <td  style="padding: 0px;width: 130px;text-align: left" >BBB</td>
                                <td  style="padding: 0px;width: 181px;text-align: left" >CCC</td>
                                <td  style="padding: 0px;width: 85px;text-align: left" >DDD</td>
                                <td  style="padding: 0px;width: 0.5px"></td>
                                <td  style="padding: 0px;text-align: center;width: 70px" >XXX</td></tr>

                        </tbody>
                    </table>

                </div>

            </div>

                <table style="width: 95%" id="tblCountSysTableChanges">
                    <tr><td style="font-weight: bold;text-align: right">456 </td></tr>
                </table>

                <div id="div2"  class="tab-pane">
                    <table>
                        <tr>
                            <td>AAAAAAAAA</td>
                        </tr>
                    </table>

                </div>

        </div>
    </div>

Here are my fiddles .1 This one is without vertical scroll bar

2. This is with vertical scroll bar . This second fiddle is shifting columns.

Can someone tell why and how to avoid it?

Answer 1

The why is because there is not enough room within the parent for the scrollbar to fit, thus it shrinks the other elements a little to make room

The only way I know to avoid it without changing the scrollbar would be to hide the scrollbar unless the tbody is hovered, like this. This uses overflow:hidden on the tbody unless it is hovered, then it changes to overflow-y:scroll (which doesn't affect positioning or width of the elements when toggled like this)

Following is my added CSS (mostly just the inline stuff moved into an external CSS file), you can look at the jsFiddle for the updated HTML

th, td {
    padding:0px;
    margin:0px;
    text-align:left;
}
th:nth-child(1), td:nth-child(1) {
    width:0px;
    visibility:hidden;
}
th:nth-child(2), td:nth-child(2) {
    width: 130px;
}
th:nth-child(3), td:nth-child(3) {
    width:181px;
}
th:nth-child(4), td:nth-child(4) {
    width:85px;
}
th:nth-child(5), td:nth-child(5) {
    width:.5px;
}
th:nth-child(6), td:nth-child(6) {
    width:70px;
    text-align:center;
}
tbody {
    overflow:hidden;
}
tbody:hover {
    overflow-y: scroll;
}
thead > tr, tbody{
    display:block;
}

The approach was found in this SO post, another option would be to create a custom scrollbar but that requires a bit of javascript to do as the top answer on that question says

I am not quite sure why you used two tables... Probably to keep the head in place... But I put them both together and used the approach described here (found by a simple Google search) to fix it

With that being said, there are some other CSS basics that you really need to pick up. Following is a list of some and reasons why

1. Use classes and other generic selectors It saves time, is better structured, and is easier to follow than inline CSS
2. Tidy up your code! When I first looked at your jsFiddle the spacing was off a lot which makes it hard to follow and read. jsFiddle even has a "TidyUp" Button; Use it!
3. Know what something does when you put it in your code If you use padding, know what padding does. If you use IDs, know the reason why. The same goes for javascript or any other language you are using. It allows you to find the root of the problems you're having, avoid errors in the first place, and use things the way that they are supposed to be used
4. If you think there could be a better way to do something, look for it If you're tired of writing the same 5 styles for a block of elements, there probably is something that allows you to apply the 5 styles in only 1 line (a class). This is just an example, but the principle applies to anything. If you've thought of it, most likely someone else has too
5. Avoid inline CSS as much as possible It makes finding and fixing problems difficult, especially when you have lots of elements styled the same way. It also overrides non-inline CSS which can cause a whole lot of problems if you're not careful
6. DON'T REPEAT IDS It took me around 10 minutes to fix a formatting error because I didn't realize you repeated the ID tblCountSysTableChanges twice. It causes all sorts of errors and is illegal markup

I hope you learned some things and keep them in mind! Cheers! (: