JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divScroll" style="overflow-x: hidden; width: 100%;height:300px;" class="cssdiv">
    <table cellpadding="0" cellspacing="0" id="contentPlaceHolderMain_tableAppointment" width="100%" border="1" class='myselect'>
        <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...

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;
}
.myselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

var selecting = false;
var selectable = '.myselect tr:not(:nth-child(1)) td:nth-child(3)';
$(selectable).mousedown(function () {
    selecting = true;
    $(selectable).removeClass('csstdhighlight');
}).mouseenter(function () {
    if (selecting) {
        $(this).addClass('csstdhighlight');
        fillGaps();
    }
});
$(window).mouseup(function () {
    selecting = false;
}).click(function () {
    $(selectable).removeClass('csstdhighlight');
});

function fillGaps() {
    min = $('td.csstdhighlight:first').parent().index();
    max = $('td.csstdhighlight:last').parent().index();
    $('.myselect tr:lt('+max+'):gt('+min+') td:nth-child(3)').addClass('csstdhighlight');
}