html - 左側の 2 つの列とヘッダーが固定されたレスポンシブ テーブル

Question

この問題に関するいくつかの記事を読みましたが、解決できませんでした。例のほとんどは、ヘッダーが 1 つの行で構成され、同時に行がカレンダーのように 1 つの行であるテーブルを示しています。私のテーブルには 2 行のヘッダーがあり、rowspan で始まる行があるため、機能させることができませんでした。最初の 2 つの列 (または左の列のみ) とヘッダーを固定する必要があるため、画面を狭めた場合、残りの列は右にスクロールできます。ここにテーブルがあります

    <table class="responsive">
    <tbody>             
    <tr>
    <th rowspan="2" scope="col">CITY</th>
    <th rowspan="2" scope="col">YP</th>
    <th colspan="3" scope="col">MORNING</th>
    <th colspan="3" scope="col">MORNING</th>
    <th colspan="3" scope="col">NIGHT</th>
    </tr>
    <tr>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    </tr>
    <tr>
    <th rowspan="2" scope="col">Name of city 1</th>
    <td>I</td>
    <td>80</td>
    <td>Y</td>
    <td>N</td>
    <td>90</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>94</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>Y</td>
    <td>N</td>
    <td>98</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <th rowspan="2" scope="col">Name of city 2</th>
    <td>I</td>
    <td>77</td>
    <td>N</td>
    <td>N</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>88</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>82</td>
    <td>Y</td>
    <td>Y</td>
    <td>87</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    </tbody>
    </table>

Zurb Studio - Crafty Responsive Tables を試しましたが、テーブルの複雑な性質がデモの例と一致しません。