JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://survey.researchresults.com/survey/selfserve/53b/g01f/170813/jquery.floatThead.js"></script>
<table>
    <colgroup>
        <col width="78" style="mso-width-source:userset;mso-width-alt:2852;width:59pt">
            <col width="64" span="8" style="width:48pt">
                <col width="78" style="mso-width-source:userset;mso-width-alt:2852;width:59pt">
    </colgroup>
    <thead>
        <tr>
            <td>header one</td>
            <td>header one</td>
            <td>header one</td>
            <td>header one</td>
            <td>header one</td>
            <td>heaven</td>
            <td>header one</td>
            <td>header one</td>
            <td>header one</td>
            <td>header one</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>x</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>x</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>x</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>x</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>x</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
           ...

CSS

table {
    border-collapse: collapse;
    margin-bottom: 5em;
}

td {
    border: solid 1px #ACE;
    vertical-align: top;
    font-family: arial;
    color: #ACE;
}

thead td {
    background-color: red;
    color: #FFF;
    font-weight: bold;
    text-align: center;
	border: solid 1px #ACE;
}

JavaScript

var decipher_table = jQuery('table:first');
var cancel_float = decipher_table.floatThead('destroy');
var second_to_last_row = decipher_table.find('tr:last').prev();
decipher_table.floatThead({
   bottom: function($table) {
       var $tr = $table.find('.anchor_header').parent();
       return -$tr.height();
   }
});

//https://stackoverflow.com/a/45739618/5076162
if (Math.abs(second_to_last_row.offset().top) + second_to_last_row.height() + second_to_last_row.offset().top >= second_to_last_row.outerHeight()) {
    console.log("offset top height: " + Math.abs(second_to_last_row.offset().top));
    console.log("tbody height: " + second_to_last_row.height());
    console.log("tbody outer: " + second_to_last_row.outerHeight());
    // We're at the bottom!
}