Jquery tabs inside a table layout

Question

The part I want to "tab" is inside a nested table layout.

It starts after a table mess like this:

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> 
        <div id ="SearchModuleContainer">
       <ul class="tabNavigation">
          <li><a href="#PersonSearchPanel"></a></li>
          <li><a href="#TypeSearchPanel"></a></li>
       </ul>

      <div id="PersonSearchPanel" runat="server">
        <table width="100%" border="0" cellspacing="0">
           <tr>
             <td align="center" valign="top">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
         ...
         ...
      </div>
      <div id="TypeSearchPanel" runat="server">
        <table width="100%" border="0" cellspacing="0">
           <tr>
             <td align="center" valign="top">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
         ...
         ...
      </div>
    </div>

I've added a ref to jquery-ui-1.7.1, and in my js file, I have:

$(document).ready(function() {
    $("#SearchModuleContainer").tabs();
});

My question is, have I missed something, or are there some issues when using jquery inside an "old-school" messed up table layout like this?

Answer 1

You need to make sure you have the css correctly implemented for the ui-tabs-hide, ui-tabs-selected classes. If you havn't done this correctly it will seem like the script isn't working. The most easy way to check it adding the following:

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" />

Just add this in the head section of your html page before your javascript files. I tested your example and the tabs functionality works with tables.

[EDIT] I pasted the source code from my test example here.