网格中的列失调
网格中的列失调
提问于 2014-07-07 11:28:00
我很难在网格中对齐我的列。我只是不明白为什么列不对齐。首先，我认为这是由于滚动条，但即使我删除滚动条，我不能让列对齐。这是我的html代码
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; table-layout: fixed; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<thead>
<tr>
<th>First Col</th>
<th>Second col</th>
<th>Third col</th>
<th>Fourth col</th>
<th>Fift col</th>
<th>Sixth col</th>
<th>seventh col</th>
<th>eigth col</th>
</tr>
</thead>
</table>
<div style="overflow-y: scroll; overflow-x: hidden; height: 480px;">
<table class="gridHover" id="gridData" border="1" style="table-layout:fixed">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>这是我的小提琴，你们可以很容易的帮我。
你可以看到，输出在铬和IE是不同的，我真的不明白为什么是这样。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-07-24 19:38:22
我最后一次尝试这个话题。我用了固定的宽度，我认为它很好用。如果不能定义特定的%值，则可能需要对不同的屏幕分辨率/设备使用不同的修复值。在柱子的底部拉小提琴。
CSS代码(更改的.gridHover {宽度:640 CSS；}
.overflow {
overflow-y: auto;
overflow-x: hidden;
height: 480px;"
}
.gridHover {
width: 640px;
margin-bottom: 20px;
}
.gridHover th, .gridHover td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.gridHover th {
font-weight: bold;
}
.gridHover thead th {
vertical-align: bottom;
}HTML代码(再次将其更改为原始的8 col布局)：
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; table-layout: fixed; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<thead>
<tr>
<th style="width: 120px;">First Col</th>
<th style="width: 60px;">Second col</th>
<th style="width: 50px;">Third col</th>
<th style="width: 70px;">Fourth col</th>
<th style="width: 70px;">Fift col</th>
<th style="width: 50px;">Sixth col</th>
<th style="width: 100px;">seventh col</th>
<th style="width: 100px;">eigth col</th>
</tr>
</thead>
</table>
<div class="overflow">
<table class="gridHover" id="gridData" border="1" style="table-layout:fixed">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;"> <col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>您可以在这个小提琴-> http://jsfiddle.net/4KB3C/56中检查结果。
Stack Overflow用户
发布于 2014-07-24 11:47:45
第一件事是，没有一个收尾。你也不应该设置宽度超过最大宽度！
对于你的问题，现在：
只需从包含第二个表的div中移除“overflow：”，就可以.
我想这就是你要做的。
Stack Overflow用户
发布于 2014-07-07 13:01:56
您使用的是两个不同的表。这就是为什么你要得到对齐问题。我想这就是你想要的。
http://jsfiddle.net/4KB3C/35/
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<thead>
<tr>
<th>First Col</th>
<th>Second col</th>
<th>Third col</th>
<th>Fourth col</th>
<th>Fift col</th>
<th>Sixth col</th>
<th>seventh col</th>
<th>eigth col</th>
</tr>
</thead>
</table>
<div style="overflow-y: scroll; overflow-x: hidden; height: 480px;">
<table class="gridHover" id="gridData" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24609518
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号