I am having difficulty aligning my columns in my grid. I just cant figure out why columns are not aligning. First i thought its due to scroll bar but even if i remove scroll bar i cant get columns to align. This is my html code
<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>
This is my Fiddle which could be easy for you guys to help me out.
You can see that output is different in chrome and IE and i really dont understand why is it like that.
My last attempt on this topic. I have used fixed width and I think it works out. If you can't define a certain % value you might need to use different fix values for different screen resolutions / devices. Fiddle at the bottom of the post.
CSS Code (Changed .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 (changed it to the original 8 col layout again):
<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>
You can check the result in this fiddle -> http://jsfiddle.net/4KB3C/56