JSFiddle - React, Tailwind, and code Playground

HTML

<table border='1'>
  <thead>
    <tr>
      <th>Product 1</th>
      <th>Product 2</th>
      <th>Product 3</th>
      <th>Product 4</th>
      <th>Product 5</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CSS

th, td {
  background-color:#fff;
}

th.hover, td.hover {
  background-color: #aaa;
}

JavaScript

//just to build the table, as I didn't feel like typing out the HTML code
for(var r = 0; r < 5; r++) {
	var row = $('<tr>');
	for(var c = 0; c < 5; c++) {
  	var cell = $('<td>');
    if(c==0) { cell.append('date'); }
    row.append(cell);
  }
  row.appendTo('tbody');
}

//when hovering over a cell that's not the first cell in the row
$('td:not(:first-child)').hover(
	function() {//on mouse in
  	//get the current row number (add one for use with nth-child)
    var row = $(this).closest('tr').index() + 1;
    //add hover class to the row's first cell (date column)
    $('tbody tr:nth-child(' + row + ')').find('td').first().addClass('hover');
    
    //get the current column number (add one for use with nth-child)
    var col = $(this).index() + 1;
    //add hover class to the header row's corresponding cell
    $('thead th:nth-child(' + col + ')').addClass('hover');
	},
  function() {//on mouse out
  	//same as mouse in - gather row index
    var row = $(this).closest('tr').index() + 1;
    //remove hover class from row's first cell
    $('tbody tr:nth-child(' + row + ')').find('td').first().removeClass('hover');
    
    //same as mouse in - gather cell index in row
    var col = $(this).index() + 1;
    //remove hover class from header row's corresponding cell
    $('thead th:nth-child(' + col + ')').removeClass('hover');
  }
);