JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing=0>
    <tr id="test">
        <td>Foo</td>
        <td>Bar<span>Baz</span></td>
    </tr>
    <tr id="test">
        <td>Foo</td>
        <td>Bar<span>Baz</span></td>
    </tr>
</table>

CSS

table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    border-spacing:0px;
}
tr{
    width:200px;
     height:100px;
    background:red;


}
td{

    border-collapse:collapse;
    border:thin red solid;
    background:green;

}

JavaScript

$('tr').hover(function(){
   console.log('mouseover');
   
   },function(){
    console.log('mouseout');
   });