How to use table dnd for nested tablee structure?

Question

Following is my query.

I am using table dnd js for sorting the rows of my table. When table structure is simple, it works perfectly. But is there a way to group two (or perhaps more) rows and move them together? To do this, i am using nested table structure, below is the html.

<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1">
        <td colspan="3">
            <table>
                <tr>
                    <td>1</td>
                    <td>One</td>
                    <td>some text</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>OneOne</td>
                    <td>some text</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>OneOneOne</td>
                    <td>some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr id="2">
        <td colspan="3">
            <table>
                <tr>
                    <td>2</td>
                    <td>Two</td>
                    <td>some text</td>
                </tr>
            </table>
        </td>
    </tr>    
</table>

And script is

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        // Initialise the table
        $("#table-1").tableDnD();
        // Make a nice striped effect on the table
        $("#table-1 tr:even").addClass("alt");
    })      
</script>

But this is not working. Infact using span tag instead of nested table does not work.Please help what i am missing here.

Thanks