Q:

Column misalignment in grid

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.

A:

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

