JSFiddle - React, Tailwind, and code Playground

HTML

<table class="record_table">
    <tr>
        <td><input type="checkbox" /></td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

CSS

.record_table {
    width: 100%;
    border-collapse: collapse;
}

.record_table tr:hover {
    background: #eee;
}

.record_table td {
    border: 1px solid #eee;
}

JavaScript

$(document).ready(function() {
    $('.record_table tr').click(function(event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });
});