折疊並展開后，表格行的寬度發生變化

Question

我是Java和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>

展開/折疊功能可以正常工作。 但有一個問題。

我的桌子的寬度在開始時是100％。 但是，折疊表格行並將其展開后。 表格行的寬度不是100％。

如何解決問題？

提前致謝。

Answer 1

顯示tr元素時，您應該只恢復默認顯示值

nextRow.style.display = 'table-row';

代替

nextRow.style.display = 'block';

折疊並展開后，表格行的寬度發生變化

問題描述

1 個解決方案

解決方案1
2 已采納 2013-10-02 16:25:09

折疊並展開后，表格行的寬度發生變化

問題描述

1 個解決方案

解決方案1 2 已采納 2013-10-02 16:25:09

解決方案1
2 已采納 2013-10-02 16:25:09