td теряет настройки стиля файла ext после jQuery display:none, затем display:table

Question

Я не могу заставить таблицу отображаться правильно. Я создаю таблицу с помощью операторов HP echo - 4 столбца, до нескольких сотен строк. Я хочу показать только 20 строк таблицы в любое время. Поэтому я создаю таблицу полного размера, а затем для инициализации использую сначала вызов функции js, css (display: none) для всех строк, а затем css (display: table) для каждой из 20 последовательных строк в массиве, который я хочу показывать.

HTML-код для 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>

Php для 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>" ;   
        }

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++; 
        }   
    }); 
}

CSS для div class="title":

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

Первые 2 трэ эхо php (из "просмотра источника"):

<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>

Thead и tbody - братья и сестры, дети стола.

Основная проблема заключается в том, что столбцы tbody теряют свою ширину после вызова js. подсказки:

1. Если я остановлюсь JS на alert() Я вижу полную таблицу с 4 столбцами, отформатированными до правильной ширины столбцов как для thead, так и для tbody. (Но div.title в первом столбце выровнен по центру, а не по левому краю, как я ожидал.)

2. Когда я позволю js завершить, я увижу первые 20 строк файла, как и ожидалось, но все столбцы в tbody утратили свой стиль ширины и вернутся к ширине столбцов браузера по умолчанию на основе ширины содержимого td, но стиль ширины thead остается ХОРОШО.

Проведя несколько дней в поисках подсказок здесь и в других местах и ​​никуда не деться, у меня заканчиваются варианты. Я был бы очень признателен за любую помощь от некоторых свежих глаз, не таких красных, как мои сейчас. (Надеюсь, что в качестве первого вопроса я не слишком много поставил здесь. Возможно, это что-то глупо простое.)

Answer 1

Попробуйте установить отображение строк в таблицу-строку, а не просто в таблицу.