我不明白，当附有垂直滚动条的表时，为什么表头会移动。
这是我的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.这是带有垂直滚动条的。第二个小提琴正在转移列。
有人可以说出为什么以及如何避免吗？
原因是因为父级中没有足够的空间来容纳滚动条，因此它会将其他元素略微缩小以腾出空间
我知道在不更改滚动条的情况下避免它的唯一方法是隐藏滚动条，除非将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;
}
该方法在本SO帖子中找到，另一种选择是创建一个自定义滚动条，但这需要一些javascript来完成，因为该问题的最高答案是
我不太确定为什么要使用两个表...可能要保持位置不变...但是我将它们放在一起并使用此处描述的方法（通过简单的Google搜索找到）来修复它
话虽这么说，您实际上还需要了解其他一些CSS基础知识。以下是一些原因的列表
tblCountSysTableChanges两次ID。它会导致各种错误，并且是非法标记希望您能学到一些东西并牢记在心！干杯! （：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句