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
    //add hover class to first cell in row
    $(this).closest('tr').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
    //remove hover class from first cell in row
    $(this).closest('tr').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');
  }
);