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>

展開/折りたたみ機能は正常に機能します。しかし問題がある。

私のテーブルの幅は、最初は 100% です。ただし、テーブルの行を折りたたんで展開した後。表の行の幅が 100% ではありません。

問題を解決するには？

前もって感謝します。

4

1 に答える 1