JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tbody>
		<tr>
			<td rowspan="3">Alphabet</td>
			<td rowspan="2">a</td>
			<td>b</td>
			<td>c</td>
		</tr>
		<tr>
			<td>d</td>
			<td>e</td>			
		</tr>
		<tr>
			<td>f</td>
			<td>g</td>
			<td>h</td>
		</tr>
    <tr>
			<td rowspan="3">Number</td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>   
	</tbody>
</table>

CSS

body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
   padding: 20px;
  border: 1px solid black;
}

.hover {
   background: red; 
}

JavaScript

$("td").hover(function() {
  $el = $(this);
  $el.parent().addClass("hover");
  
  if ($el.parent().has('td[rowspan]').length == 0)
    
  	$el
      .parent()
      .prevAll('tr:has(td[rowspan]):first')
      .find('td[rowspan]')
      .addClass("hover");
}, function() { 
      
  $el
    .parent()
    .removeClass("hover")
    .prevAll('tr:has(td[rowspan]):first')
    .find('td[rowspan]')
    .removeClass("hover");

});