Question

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

这是我的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 This one is without vertical scroll bar

2. This is with vertical scroll bar。这第二个小提琴正在改变专栏。

有人可以说明为什么以及如何避免它？

Answer 1

原因是因为父母内部没有足够的空间让滚动条适合，因此它会缩小其他元素以腾出空间

我知道在不更改滚动条的情况下避免它的唯一方法是隐藏滚动条，除非tbody悬停，like this。这会在tbody上使用overflow:hidden，除非它被悬停，然后它会变为overflow-y:scroll（这样切换时不会影响元素的定位或宽度）

以下是我添加的CSS（大多数只是移动到外部CSS文件中的内联内容），你可以查看更新HTML的jsFiddle

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

这种方法在this SO post中找到，另一个选项是创建自定义滚动条，但这需要一些javascript来做，因为该问题的最佳答案是

我不太清楚为什么你使用了两张桌子......可能是为了保持头部......但我把它们放在一起并使用方法described here（通过简单的谷歌搜索找到）来解决它

话虽如此，还有一些其他CSS基础知识，你真的需要拿起来。以下列出了一些原因

使用类和其他通用选择器它比内联CSS节省时间，结构更好，更容易理解
整理你的代码！当我第一次看到你的jsFiddle时，间距很大，这使得很难跟随和阅读。 jsFiddle甚至还有一个“TidyUp”按钮;使用它！
了解将代码放入代码时的功能如果使用填充，请知道填充的作用。如果您使用ID，请知道原因。 javascript或您正在使用的任何其他语言也是如此。它允许您找到您遇到的问题的根源，首先避免错误，并按照应该使用的方式使用它们
如果您认为可以有更好的方法来做某事，那就去寻找它如果您厌倦了为一块元素编写相同的5种样式，那么可能有一些东西可以让您仅在1行（一个类）中应用5种样式。这只是一个例子，但该原则适用于任何事情。如果你已经想到它，很可能其他人也有。
尽可能避免使用内联CSS 它使查找和修复问题变得困难，尤其是当您使用相同方式设置大量元素时。它还会覆盖非内联CSS，如果你不小心，可能会导致很多问题
不要重复IDS 我花了大约10分钟来修复格式错误，因为我没有意识到您重复了ID tblCountSysTableChanges两次。它会导致各种错误并且是非法标记

我希望你能学到一些东西并记住它们！干杯! （：

当有垂直滚动条时，列会移动

1 个答案: