td loses ext file style settings after jQuery display:none then display:table

Question

I can't get table to display correctly. I'm creating the table using HP echo statements - 4 columns, up to several hundred rows. I only want to show 20 rows of the table at any time. So I create the full size table and then to initialize I use a js function call to first, css (display: none) for all rows, followed by css (display:table) for each of the 20 sequential rows from the array I wish to show.

The HTML for thead:

<thead> 
        <tr>
            <th>
                <div class='title'>Fiddle Tunes Collection (<? echo sizeof($pml_arr); ?>) </div>
            </th>
            <th class='key' >Key</th>
            <th class='mode'>Mode</th>
            <th id="TS" class='type'>Tune/Song</th> 
        </tr>
    </thead>

The php for tbody:

foreach ($pml_arr as $row => $cell) {   
            $item = $row + 1;
            echo    "<tr id='row" . $row . "'>" ;   
                echo    "<td>";
                    echo "<div class='title'> ";
                        echo "$item"; 
                        echo ") ";
                        echo "$cell[0] ";
                    echo "</div> ";
                echo "</td>";
                echo    "<td class='key'>$cell[1]</td>" ;
                echo    "<td class='mode'>$cell[2]</td>" ;
                echo    "<td class='type'>$cell[3]</td>" ;
            echo    "</tr>" ;   
        }

The js:

function initTblDisp()  { // alert("View the full array in the table");
    $(document).ready (function ()   { 
        $("tbody > tr").css ("display", "none"); 
        var i=0; var row_id;
        while (i<20)    {   
            row_id = ("row" + i); 
            $("#" + row_id).css ("display", "table"); 
            i++; 
        }   
    }); 
}

The css for the div class="title":

.title          { width:55%; text-align:left; padding-left:4px; 
padding-right:4px; display:inline; white-space:no-wrap; overflow:hidden; }

The 1st 2 tr's of echoed php (from "view source"):

<tr id='row0'>
  <td> <div class='title'> 1) Boys of Bluehill </div> </td>
  <td class='key'>D</td><td class='mode'>major</td>
  <td class='type'>T</td>
</tr>

<tr id='row1'>
  <td><div class='title'> 2) Cluck Old Hen </div> </td>
  <td class='key'>A</td>
  <td class='mode'>Dorian</td>
  <td class='type'></td>
</tr>

The thead and tbody are siblings, children of table.

The main problem is the tbody cols lose their width styling after the js call. Hints:

1. If I pause the js at the alert() I see the full table with the 4 cols formatted to the correct col widths for both thead and tbody. (But the .title div in the 1st col is aligned "center", not "left" as I expected.)

2. When I let the js complete I'll see the 1st 20 rows of the file as expected, but all cols in the tbody have lost their width style and revert to default browser col widths based on td content width, but the thead width styling remains OK.

After spending several days searching here and elsewhere for hints and getting nowhere I'm running out of options. I'd greatly appreciate any help from some fresh eyes not as red as mine are right now. (I hope as my 1st question I didn't put too much in here. It's probably something stupidly simple.)

Answer 1

Try setting the rows display to table-row instead of just table.