JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <h2>View Students</h2>
    <table class="table table-striped table-bordered persist-area">
        <thead class="persist-thead">
            <tr>
                <td width="5%"></td>
                <td width="15%">Registration Section</td>
                <td width="20%" style="text-align: left">User ID</td>
                <td width="30%" colspan="2">Name</td>
                
                <td width="15%">Rotating Section</td>
                <td width="15%">Manual Registration</td>
            </tr>
        </thead>        
        <tr class="info persist-header">
            <td colspan="7">Students Enrolled in Registration Section 1</td>
        </tr>
        <tbody id="section-1">            
            <tr>
                <td>1</td>
                <td>1</td>
                <td style="text-align: left">lastf</td>
                <td style="text-align: left">First</td> 
                <td style="text-align: left">Last</td>
                <td>NULL</td>
                <td>FALSE</td>
            </tr>          
            <tr>
                <td>1</td>
                <td>1</td>
                <td style="text-align: left">lastf</td>
                <td style="text-align: left">First</td> 
                <td style="text-align: left">Last</td>
                <td>NULL</td>
                <td>FALSE</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td style="text-align: left">lastf</td>
                <td style="text-align: left">First</td> 
                <td style="text-align: left">Last</td>
                <td>NULL</td>
                <td>FALSE</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td style="text-align: left">lastf</td>
                <td style="text-align: left">First</td> 
                <td style="text-align: left">Last</td>
                <td>NULL</td>
               ...

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata");
@font-face {
    font-family: 'Grand Hotel';
    src: url('../fonts/grand-hotel/GrandHotel-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
}

body {
    background: #b8d5e5;
    background: linear-gradient(#0a6496, #b8d5e5);
    background-attachment: fixed;

    font-family: 'Source Sans Pro', sans-serif;
    height: 100%;
    position: relative;
}

table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

table tr.table-header {
    border-bottom: 1px solid black;
}

.table tr {

}

.table td {
    padding: 5px;
    border-top: 1px solid #dddddd;
}

.table-bordered {
    border: 1px solid #AAAAAA;
    border-collapse: separate;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.table-striped>tbody>tr:nth-child(even) {
    background: #f9f9f9;
}

.table-striped>tbody>tr:nth-child(odd) {
    background: #ffffff;
}

.table>thead>tr {
    background: #E1E1E1;
}

.table>tbody>tr.info {
    background-color: #d9edf7;
}

.floating-thead {
    position: fixed;
    top: 0;
    visibility: hidden;
}

.floating-header {
    position: fixed;
    top: 0;
    visibility: hidden;
}

.floating-thead > td,
.floating-header > td {
    display: inline-block;
    text-align: center;
}

.content {
    box-shadow: 0 2px 15px -5px #888888;
    background-color: #E9EFEF;
    border-radius: 3px;
    padding: 2%;
    margin: 2% 15px;
}

JavaScript

function UpdateTableHeaders() {
    var count = 0;
    var scrollTop = parseInt($(window).scrollTop());
    $(".persist-area").each(function() {
        var el = $(".persist-thead", this);
        var height = parseFloat(el.height());
        var offset = parseFloat(el.offset().top);
        var floatingHeader = $(".floating-thead", this);
        if (scrollTop > (offset - height)) {
            floatingHeader.css("visibility", "visible");
        }
        else {
            floatingHeader.css("visibility", "hidden");
        }
        $(".persist-header", this).each(function() {
            floatingHeader = $("#floating-header-" + count);
            el = $(this);
            height = parseFloat(el.height());
            offset = parseFloat(el.offset().top);
            if (scrollTop > (offset - height)) {
                if (floatingHeader.css("visibility") != "visible") {
                    floatingHeader.css("visibility", "visible");
                }
            }
            else {
                floatingHeader.css("visibility", "hidden");
            }
            count++;
        });
    });
}

$(function() {
    // Each persist-area can have multiple persist-headers, we need to create each one with a new z-index
    var persist = $(".persist-area");
    var z_index = 900;
    var count = 0;
    persist.each(function() {
        var el = $(".persist-thead>tr", this);
        el.before(el.clone()).css({"width": el.width(), "top": "0px", "z-index": "899"}).addClass('floating-thead');
        $(".persist-header", this).each(function() {
            var clone = $(this);
            clone.before(clone.clone()).css({
                "width": clone.width(),
                "top": (0 + el.height()) + "px",
                "z-index": "" + z_index
            }).addClass("floating-header").removeClass("persist-header").attr('id', 'floating-header-' + count);
            z_index++;
            count++;
        });
    });

    if (persist.length > 0) {
       ...