JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divScroll" class="cssdiv">
<table cellpadding="0" cellspacing="0" id="contentPlaceHolderMain_tableAppointment" width="100%"  border="1">
    <tr class="csstablelisttd">
        <td>Hour</td>      <td>Minute</td>
        <td>Student Name</td>
    </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
 ...

CSS

.csstablelisttd
{text-align: left;
color: #1B72A4;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
.csstdhighlight
		{
			background-color: #CCFFCC;
			color: Red;
			text-align: center;
			vertical-align: top;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 11px;
		}
.cssdiv
{
	/*border: 1px solid #CCCCCC;*/
	overflow: auto;
}

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');

$table.on('mouseenter', 'td:last-child', function(e) {
    if (e.which === 1) {
        $(this).addClass('csstdhighlight');
    }
}).on('click', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});