我无法在网格中对齐列。我只是无法弄清楚为什么列没有对齐。首先我认为它是由于滚动条，但即使我删除滚动条我不能让列对齐。这是我的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>
这是我的Fiddle，你可以很容易地帮助我。
你可以看到chrome和IE的输出不同，我真的不明白为什么会这样。
答案 0 :(得分：1)
如果我错了或不确定你想要达到的目标，我很抱歉。但是，在我看来，您可以设置第一行中第二行和第三行中每列的宽度与第一行中的所有列相同，以便表格对齐。您可以直接在“TH”标记中设置大小。
<thead style="align:centre; margin:auto;">
<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>
和
<td style="width: 120px;"> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td style="width: 120px;"> <span style="word-wrap: break-word">AB</span>
</td>
<td style="width: 120px;"> <span style="word-wrap: break-word">1</span>
</td>
答案 1 :(得分：1)
首先，缺少关闭。您也不应将宽度设置为超过最大宽度！
现在解决您的问题：
只需从包含第二张表的div中删除“overflow-y：scroll;”即可开始...
我认为这就是你需要做的一切。
答案 2 :(得分：1)
我对这个话题的最后一次尝试。我使用固定宽度，我认为它的效果。如果您无法定义某个％值，则可能需要为不同的屏幕分辨率/设备使用不同的修正值。在帖子的底部小提琴。
CSS代码（已更改.gridHover {width：640px;}
.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 CODE（再次将其更改为原始的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>
你可以检查这个小提琴的结果 - ＆gt; http://jsfiddle.net/4KB3C/56
答案 3 :(得分：0)
您正在使用两个不同的表格。这就是你得到对齐问题的原因。我想这就是你所需要的。
<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>
答案 4 :(得分：0)
将最大宽度更改为100％，因为如果原始widht小于max widht，则没有意义。
.gridHover {
width: 100%;
margin-bottom: 20px;
max-width: 100%;
}
我删除你的填充，导致你的表宽度最小化，并且行高有点烦人。
.gridHover th, .gridHover td {
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}