JSFiddle - React, Tailwind, and code Playground

HTML

<table id="MySpecialTable">
    <tbody>
        <tr><td> Hello 1</td></tr>
        <tr><td> Hello 2</td></tr>
        <tr><td> Hello 3</td></tr>
        <tr><td> Hello 4</td></tr>
        <tr><td> Hello 5</td></tr>
        <tr><td> Hello 6</td></tr>
        
    </tbody>
</table>
<br />

<div id='textDiv'>Log</div>
<div id='mousePos'>Log</div>

CSS

#MySpecialTable {
    width:400px;
    margin: 0 auto;
    border:solid;
    border-width:1px;
    unselectable:on;
    user-select:none;
    MozUserSelect:none;
    
}
#MySpecialTable tr td{
    height:20px;
    line-height:20px;
    font-size:15px;
    padding-left:10px;
    color:black;
    font-family: Arial;
}
#MySpecialTable tr:nth-child(even) td{
    background-color:#DDD;
}
#MySpecialTable tr:nth-child(odd) td{
    background-color:#EFEFEF;
}

JavaScript

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(){
   $("#textDiv").text(this.textContent); 
    selected = this;
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.textContent); 
    selected = null;
});
$(document).on("mousemove",function(e){
    $("#textDiv").text($(e.target).html());
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table