Resizing a column does not work if the table header has multiple rows and column columns in a table cell

I use a widget (I got it online) to resize the columns of a table. Its work is fine if the table header <thead>has rows with an equal number of columns, but does not work if the attribute is colspanset to a row cell. Let's say there are two rows in a table with six columns. The first cell will have colspan=6, and the second will have all the columns. In this case, resizing should work on the second line. But it does not work.

Can someone tell me the reason?

Here is my code:

 <!DOCTYPE>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <style>

table{
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid black;   
}
tr.last td {
    border-bottom: 1px solid black;
}

td{
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
    white-space:nowrap;
    padding: 2px 5px;
    text-align: left;
    overflow:hidden;
}

td.last {
  border-right: none;
}

thead td div:first-child{
  text-overflow:ellipsis;
  overflow:hidden;
}
tbody td div:first-child{
  overflow:hidden;
}

.scrollContainer {
    overflow:auto;
    width:700px;
    height:auto;
    display:inline-block;
    border:1px solid red;
}
.sort1,.sort2{
 height:20px;
 border:1px solid red;
 position:absolute;
 top:0px;
}
.sort1{
 background:url('popup_trg_indicator.gif') 50% 50% no-repeat; 
 width:10px;
 right:0px;
}

.sort2{
  background:url('sort_asc.gif') 50% 50% no-repeat;
   width:12px;
   right:10px;
}
.resizeHelper,.ui-resizable-e {
    cursor: e-resize;
    width: 10px;
    height: 100%;
    top: 0;
    right: -8px;
    position: absolute;
    z-index: 100;
    background:black;
}

</style>
<div class="scrollContainer">
    <table id="MyTable" width="100%">
         <thead>

             <tr>
                <td style="width:200px;" colspan="6">
                  <span >Column 1</span> 
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <!--
                <td style="width:200px;">
                  <span >Column 2</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:300px;">
                  <span >Column 3</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:150px;">
                  <span >Column 4</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 5</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                 </td>
                <td class="last" style="width:100px;">
                   <span >Column 6</span>
                   <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>                  
                </td>
                -->
            </tr>

            <!-- Second Row -->
               <tr>
                <td style="width:200px;">
                  <span >Column 1.1</span> 
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 2.2</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:300px;">
                  <span >Column 3.3</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:150px;">
                  <span >Column 4.4</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 5.5</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                 </td>
                <td class="last" style="width:100px;">
                   <span >Column 6.</span>
                   <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>                  
                </td>
            </tr>

        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>

            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>
<div>Rama Rao</div>

<script>
 /**
 * Plug-in
 * Enables resizable data table columns.
 **/
(function($) {
   $.widget("ih.resizableColumns", {
       _create: function() {
            this._initResizable();
        },

        _initResizable: function() {

            var colElement, colWidth, originalSize,colIndex;
            var table = this.element;

            this.element.find("thead td").resizable({
                handles: {"e": ".resizeHelper"},
                minWidth: -10, // default min width in case there is no label
                // set correct COL element and original size
                start:function(event, ui) {
                    colIndex = ui.helper.index() + 1;
                    colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
                    colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
                    originalSize = ui.size.width;
                },                

                // set COL width
                resize: function(event, ui) {
                    var resizeDelta = ui.size.width - originalSize;                    
                    var newColWidth = colWidth + resizeDelta;
                    colElement.width(newColWidth);  

                    // height must be set in order to prevent IE9 to set wrong height
                    $(this).css("height", "auto");
                }
            });
        }

    });
})(jQuery);
</script>

<script>
$('#MyTable').resizableColumns();
</script>