html - テーブルのヘッダー行の下に行をカスケードする

Question

見出しの下に行がある Web サイトのテーブルを作成しました。複数のヘッダーがあり、最初に表示されたときにのみヘッダーを表示し、ヘッダーのボタンがクリックされたときにのみ下の行を表示するようにします。これを行う方法はありますか？カスケード テーブルを検索してきましたが、ドロップダウン メニューしか表示されず、探しているものではありません。どんな助け（リンク、説明、コード）も大歓迎です！以下は、見出しの 1 つと、テーブル内の次の行のいくつかの例です。

この例をさらに明確にするために、「現在の場所」を表示する行のみが表示され、次の行 (地方、郊外、都市 - 場所の種類) が現在の場所まで表示されないようにする必要があります。場所をクリックするか、そこにあるボタンをクリックします。

<table border="1" cellpadding="5%">
        <tr><th align=left>Current Location</th></tr>
        <tr>
            <td>Rural</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
            </tr>
        <tr>
            <td>Suburban</td>
            <<td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>
        <tr>
            <td>Metropolitan</td>
            <td>Total Value</td>
            <td>Average Value</td>
            <td>Percentage of total</td>
        </tr>