webtoolkit scrollable tables not working on 2nd jquery ui tab

webtoolkit scrollable tables not working on 2nd jquery ui tab

I'm using the webtoolkit scrollable table plugin on two tabs.  The first tab will displays correctly with a scroll bar for the table.  The second tab just loads the whole table without adding a scroll bar.  When I reverse the order of the tabs the one that would not display the scroll bar now shows it correctly and the other tab does not.  Any ideas?

  1. <link type="text/css" href="theme/ui/ui.all.css" rel="stylesheet">
  2. <script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/webtoolkit.scrollabletable.js"></script>
    <script type="text/javascript" src="js/ui/ui.core.js"></script>
    <script type="text/javascript" src="js/ui/ui.tabs.js"></script>

    <script>
     $("#tabs").tabs();
        var tabContainers = $('div.tabs > div');
       
        $('div.tabs ul.tabNavigation a').click(function () {
            tabContainers.hide().filter(this.hash).show();
           
            $('div.tabs ul.tabNavigation a').removeClass('selected');
            $(this).addClass('selected');
           
            return false;
        }).filter(':first').click();


        var t = new ScrollableTable(document.getElementById('myScrollTable'), 350);
        var u = new ScrollableTable(document.getElementById('myScrollTable2'), 350);

    </script>


    <div id="tabs">
        <ul>
            <li><a href="#order_line">Order Lines</a></li>
            <li><a href="#order_notes">Order Notes</a></li>
         </ul>
        <!-- Order Line tab -->
        <div id="order_line">
            <table id="myScrollTable" width="100%">
                <thead>
                    <tr>
                        <th class="center rightb">Line#</th>
                        <th class="center rightb">Item Description</th>
                    </tr>
                </thead>
                <tbody>
        <?php     for ($i=0;$i<$x;$i++){  ?>
                    <tr class="highlight">
                        <td class="center"><?php echo $line[$i]?></td>
                        <td><?php echo $itemDesc[$i]?></td>
                    </tr>
        <?php     }     ?>        
                </tbody>
            </table>
        </div>  
        <!-- Order Notes Tab -->
         <div id="order_notes">
            <table id="myScrollTable2" width="70%">
                <thead>
                    <tr>
                        <th class="center rightb">Line#</th>
                        <th class="center rightb">Note</th>
                    </tr>
                </thead>
                <tbody>
                <?php     for ($i=0;$i<$n;$i++){  ?>
                         <tr class="highlight">
                            <td class="center"><?php echo $noteLine[$i]?></td>
                            <td><?php echo $note[$i]?></td>
                        </tr>
                <?php     }     ?>       
                </tbody>
            </table>
        </div>
    </div>