JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tftable" border="1">
    <tbody>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
        </tr>
        <tr>
            <td>Row:1 Cell:1</td>
            <td>Row:1 Cell:2</td>
            <td>Row:1 Cell:3</td>
            <td>Row:1 Cell:4</td>
            <td>Row:1 Cell:5</td>
        </tr>
        <tr>
            <td>Row:2 Cell:1</td>
            <td>Row:2 Cell:2</td>
            <td>Row:2 Cell:3</td>
            <td>Row:2 Cell:4</td>
            <td>Row:2 Cell:5</td>
        </tr>
        <tr>
            <td>Row:3 Cell:1</td>
            <td>Row:3 Cell:2</td>
            <td>Row:3 Cell:3</td>
            <td>Row:3 Cell:4</td>
            <td>Row:3 Cell:5</td>
        </tr>
        <tr>
            <td>Row:4 Cell:1</td>
            <td>Row:4 Cell:2</td>
            <td>Row:4 Cell:3</td>
            <td>Row:4 Cell:4</td>
            <td>Row:4 Cell:5</td>
        </tr>
        <tr>
            <td>Row:5 Cell:1</td>
            <td>Row:5 Cell:2</td>
            <td>Row:5 Cell:3</td>
            <td>Row:5 Cell:4</td>
            <td>Row:5 Cell:5</td>
        </tr>
        <tr>
            <td>Row:6 Cell:1</td>
            <td>Row:6 Cell:2</td>
            <td>Row:6 Cell:3</td>
            <td>Row:6 Cell:4</td>
            <td>Row:6 Cell:5</td>
        </tr>
    </tbody>
</table>

CSS

.tftable {
    font-size:12px;
    color:#333333;
    width:100%;
    border-width: 1px;
    border-color: #729ea5;
    border-collapse: collapse;
}
.tftable th {
    font-size:12px;
    background-color:#acc8cc;
    border-width: 5px;
    padding: 8px;
    border-style: solid;
    border-color: #729ea5;
    text-align:left;
}
.tftable tr {
    background-color:#d4e3e5;
}
.tftable td {
    font-size:12px;
    border-width: 5px;
    padding: 8px;
    border-style: solid;
    border-color: #729ea5;
}
.tftable tr:hover {
    background-color:#ffffff;
}

JavaScript

$(function () {
    $('td').hover(function (e) {
        var border_width = parseInt($(this).css('border-width'));
        if (e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()) {
            console.log('This is the border');
        }
    });
});