Ширина строки таблицы изменяется после того, как я сверну ее и разверну

Question

Ширина строки таблицы изменяется после того, как я сверну ее и разверну

0

Я новичок в Javascript и CSS, я пытаюсь расширить/свернуть таблицы с помощью JavaScript.

И я использую CSS для изменения стиля моих таблиц.

Вот мой фрагмент кода:

<html>
    <head>
        <script>
            function ShowSubTable(titleRow)
            {    
                var nextRow = titleRow.nextSibling;
                while (nextRow != null)
                {
                    if( nextRow.tagName != 'TR' ){
                        nextRow = nextRow.nextSibling;
                        continue;
                    }
                    if (nextRow.style.display == 'none')
                    {
                        nextRow.style.display = 'block';
                    }
                    else
                    {
                        nextRow.style.display = 'none';
                    }
                    break;
                }        
            }
        </script>
        <style>
            table.tlb
            {
                width: 100%;
            }
            table.tlb th
            {
                background: #E8C993;
                font-size: 22px;
            }
            table.tlb td
            {
                background: #FFEAAF;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <table class="tlb">
            <tr onclick="ShowSubTable(this)">
                <th>abc</th>
            </tr>
            <tr>
                <td>123</td>
            </tr>
            <tr onclick="ShowSubTable(this)">
                <th>def</th>
            </tr>
            <tr>
                <td>456</td>
            </tr>
        </table>
    </body>
</html>

Функция expand/collapse работает нормально. Но есть проблема.

Ширина таблицы составляет 100% в начале. Однако, после того, как я разрушаю строку таблицы и расширяю ее. ширина строки таблицы не равна 100%.

Как решить проблему?

Заранее спасибо.

Kenny Lee 02 окт. 2013, в 18:46

Источник

Теги:

javascript

html

css