列正在移动时，有垂直滚动条连接

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。这使用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做的关于该问题的最佳答案说

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

With话虽如此，还有一些其他的CSS基础，你真的需要拿起。以下是一些名单和原因

1. 使用类和其他一般选择这样可以节省时间，是结构更好，并且更容易跟随比直列CSS
2. 整理你的代码！当我第一次看到你的jsFiddle时，间距很大，很难跟踪和阅读。 jsFiddle甚至有一个“整洁”按钮;用它！
3. 将代码放入代码时知道什么是什么如果使用填充，请了解填充的用途。如果您使用ID，请知道原因。对于您使用的JavaScript或任何其他语言也是如此。它可以让你找到你遇到的问题的根源，首先避免错误，并以他们应该使用的方式使用事物
4. 如果你认为可能有更好的方法来做某件事，找它如果你厌倦了为一组元素编写相同的5种样式，那么可能有一些东西可以让你只用1行（一个类）应用5种样式。这只是一个例子，但是这个原则适用于任何事情。如果你想到这一点，最有可能别人有太多
5. 避免内联CSS 尽可能这使得查找和解决问题困难，特别是当你有很多元素的风格一样。它也覆盖非内联CSS，如果你不小心，这可能会导致一大堆的问题
6. 不要重复IDS我花了大约10分钟，以修复格式错误，因为我不知道你重复两次ID tblCountSysTableChanges。它会导致各种错误，并且是非法标记

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