使用Angular @HostListener制作表的冻结标题和第一列

Question

我需要冻结表头和表的第一列。

我在DIV中有TABLE，且CSS类别为xyscroll。 “ xyscroll”提供水平和垂直滚动条，使用此滚动条我可以在X-Y轴上移动表格。低于代码剂量，

但是我无法冻结标题和第一列。需要帮助，（角度4）

   <div class="xyscroll"><table></table></div> // html code
   .xyscroll{width:400px, height:400px, overflow:auto} // css code

表格代码：

   <table>
     <thead>
       <tr><th rowspan=2>H11</th><th colspan=4>H12</th></tr>
       <tr><th>H22</th><th>H23</th><th colspan=2>H24</th></tr>
       <tr><th>H31</th><th>H32</th><th>H33</th><th>H34</th><th>H35</th
     </tr>
     </thead>
     <tbody>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td> 
    </tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
       <tr><th>D11</th><td>D12</td><td>D13</td><td>D14</td><td>D15</td></tr>
     </tbody>
   </table>