Table column resize is not working if table header has multiple rows and colspan to table cell

Question

I am using a widget (I got it in the web) to resize table columns. Its working fine if the table header <thead> has rows with equal number of columns but is not working if the colspan attribute is set to cell of a row. Let's say there are two rows in the table with six columns. First cell will a have colspan=6 and second will have all columns. In this case the resizing should work for the second row. But it's not working.

Can somebody let me know 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>

Answer 1

The plugin above is great if you don't use the colspan attribute.

colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");

The above code lines are from the plug-in you've mentioned and are in charge of capturing all elements that share the same column index in the table with the element above them.

To better understand the situation, add the following lines anywhere in your script.

$(document).ready(function() {
    $("#MyTable tr td").each(function() {
        $(this).html($(this).index());
    });
});

This will populate a table with the column-index of each of its cells:

Neither do other great jQuery plugins like the above mentioned DataTables (which I truly love) have answers for colspan scenarios.

EDIT Perhaps I was giving you the idea that that it's not possible. I'd like to add that you can patch this plug-in by letting it know that there are cells that span over more than one column. Having said that though, You will have to take several edge cases into account.