Html 当附加垂直滚动条时，列将移动

我不明白为什么当垂直滚动条附在表格上时，表格标题会移动

以下是我的html代码：

<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>

文本1
文本2
文本3
文本5
BBB
CCC
DDD
XXX
456
AAAAAAAAA

这是我的小提琴

。第二把小提琴是移动柱子

---

有人能告诉我为什么以及如何避免它吗？

为什么是因为父级中没有足够的空间容纳滚动条，因此它会缩小其他元素以腾出空间

我知道在不改变滚动条的情况下避免它的唯一方法是隐藏滚动条，除非tbody悬停。这将在tbody上使用

溢出：隐藏

，除非将其悬停，否则它将变为

溢出-y:滚动

（这样切换时不会影响元素的位置或宽度）

下面是我添加的CSS（主要是移入外部CSS文件的内联内容），您可以查看JSFIDLE以获得更新的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;
}

该方法是在中找到的，另一个选项是创建自定义滚动条，但这需要一点javascript，正如该问题的顶部答案所示

我不太清楚你为什么用两张桌子。。。也许是为了保持头部的位置。。。但我把它们放在一起，并使用这种方法（通过简单的谷歌搜索找到）来修复它

话虽如此，您还需要学习其他一些CSS基础知识。下面列出了一些原因和原因

使用类和其他通用选择器它比内联CSS节省时间、结构更好、更易于遵循

整理你的代码当我第一次查看您的JSFIDLE时，间距过大，这使得它很难理解和阅读。jsFiddle甚至有一个“TidyUp”按钮；用它

知道当你把它放在你的代码中时它会做什么如果你使用填充，知道填充会做什么。如果您使用ID，请了解原因。javascript或您正在使用的任何其他语言也是如此。它可以让你找到问题的根源，首先避免错误，并按照预期的方式使用

如果您认为有更好的方法来做某事，那么就去寻找它。如果您厌倦了为一块元素编写相同的5种样式，那么可能有一种方法允许您在一行（一个类）中应用这5种样式。这只是一个例子，但这个原则适用于任何事情。如果你已经想到了，很可能其他人也想到了

尽可能避免内联CSS这会使查找和修复问题变得困难，尤其是当有许多元素采用相同的样式时。它还覆盖了非内联CSS，如果不小心的话，可能会导致很多问题

不要重复ID我花了大约10分钟来修复一个格式错误，因为我没有意识到您重复了ID

tblCountSysTableChanges

两次。它会导致各种错误，是非法的标记

---

我希望你学到了一些东西并牢记在心！干杯（：

我完全同意你的看法，非常感谢你的详细回答