title: Angular table selecting and highlighting all the column and row of a table
body: <p>I am trying to highlight a row and column of a table. I want to collect the highlighted row and column in an array. Below are the changes I am trying to do</p>
  <pre><code>&lt;table class=&quot;sjs-table&quot;&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor=&quot;let row of test&quot;&gt;
        &lt;td *ngFor=&quot;let val of row&quot;&gt;
          {{val}}
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>sheet-component.ts</p>
  <pre><code>export class SheetJSComponent {
   
    test:[]= [
     
      [
          &quot;Year&quot;,
          &quot;Month&quot;,
          &quot;Facebook&quot;,
          &quot;Reddit&quot;,
          &quot;LinkedIn&quot;,
          &quot;Instagram&quot;
      ],
      [
          2019,
          1,
          &quot;50&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          2,
          &quot;80&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          3,
          &quot;120&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          4,
          &quot;75&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          5,
          &quot;60&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          6,
          &quot;80&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          7,
          &quot;95&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          8,
          &quot;55&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          9,
          &quot;45&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          10,
          &quot;80&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          11,
          &quot;90&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [
          2019,
          12,
          &quot;110&quot;,
          &quot;20&quot;,
          &quot;25&quot;,
          &quot;20&quot;
      ],
      [],
      [
          &quot;This is system generated excel sheet.&quot;
      ]
  ];
  
   
   
  }
  </code></pre>
  <p>I would like to highlight the column and row when the user hover or click on that particular row or column as shared in the below image. As my understanding of css is very limited any help would be very helpful.</p>
  <p>expected highlighted column:</p>
  <p><a href="https://i.stack.imgur.com/6aF3y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6aF3y.png" alt="enter image description here" /></a></p>
  <p>Stackblitz details <a href="https://stackblitz.com/edit/angular-excel-upload-3jfrkz?file=src%2Fapp%2Fsheet.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-excel-upload-3jfrkz?file=src%2Fapp%2Fsheet.component.html</a></p>