JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<main>
  <table border=1>
    <thead>
      <tr>
        <th></th>
        <th>c1</th>
        <th>c2</th>
        <th>c3</th>
        <th>c4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>r1</th>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>
        <th>r2</th>
        <td>21</td>
        <td rowspan=2>22</td>
        <td>23</td>
        <td>24</td>
      </tr>
      <tr>
        <th>r3</th>
        <td>31</td>
        <td>33</td>
        <td>34</td>
      </tr>
      <tr>
        <th>r4</th>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
      </tr>
    <tbody>
  </table>
</main>

CSS

td {
  vertical-align: top;  
  width: 35px;
  text-align: center;
}
 
tr:hover {
  background-color: #ffa;
}

JavaScript

document.getElementsByTagName('table')[0].addEventListener('mouseover', function(e) {
	if(e.target.parentElement === this.rows[3] || e.target.parentElement === this.rows[2]) this.rows[2].cells[2].style.background = '#ffa';
});
document.getElementsByTagName('table')[0].addEventListener('mouseout', function(e) {
	if(e.target.parentElement === this.rows[3] || e.target.parentElement === this.rows[2]) this.rows[2].cells[2].style.background = 'transparent';
});