2

我不明白为什么当表格上有垂直滚动条时表格标题会发生变化。

这是我的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.这是带有垂直滚动条 的。第二个小提琴正在移动列。

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

4

1 回答 1

2

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

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

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

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

我不太清楚你为什么使用两张桌子......可能是为了保持头部到位......但我将它们放在一起并使用此处描述的方法（通过简单的谷歌搜索找到）来修复它

话虽如此，您确实需要学习其他一些 CSS 基础知识。以下是一些列表和原因

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

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

于 2013-10-16T20:36:09.280 回答