JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
   <td width=100>cel1        </td>
   <td width=100>cel2        </td>
   <td width=100>cel3        </td>
   <td width=100>cel4        </td>
   <td width=100>cel5        </td>
   <td width=100>cel6        </td>
   <td width=100>cel7        </td>
   <td width=100>cel8        </td>
</tr>

<tr>
   <td colspan=8>tussenregel       </td>
</tr>

<tr class=oplichten>
   <td>cel1        </td>
   <td>cel2        </td>
   <td colspan=3>     <table width=100%><tr><td>cel 3,4,5</td></tr></table></td>
   <td>cel6        </td>
   <td>cel7        </td>
   <td>cel8        </td>
</tr>
<!-- deze TR komt meer dan 1000x terug -->
</table>

CSS

.oplichten:hover{background-color:#ddd;}
/* en, kijkend of het een verschil zou maken voor mijn issue */
#oplichten2:hover {background-color:#ddd;}