JSFiddle - React, Tailwind, and code Playground

by ruslans_uralovs

HTML

<script src="http://www.bpratik.in/dev/DataTables/jquery.dataTables.js"></script>
<div style="height: 100px"> some paragraph here </div>

<table id="PeopleIndexTable">
        <thead>
            <tr>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test this thing</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
                <th>test</th>
               ...

CSS

body { height: 1000px; }
td, th {
    padding: 2px;
    margin: 2px;
   	border: 1px solid #000000;
}
#wrapper {
    height: 300px;
    width: 470px;
    overflow: auto;
    position: relative;
}
#data, #header { 
    position: absolute;
    top: 0px;
    background-color:white;
}
#data {
    overflow: hidden;
}
#data td {
    background-color: wheat;
}
#header {
    height: 0px; 
    overflow: hidden;
}
#header th {
    background-color: gray;
}
#header tbody {
    visibility: hidden;
}

JavaScript

var tableId = 'PeopleIndexTable';

$("#" + tableId).dataTable();

$('<div id="wrapper"><div id="data"></div><div id="header"></div></div>').insertAfter($('#' + tableId + '_wrapper div').first());

$('#data').append($('#' + tableId));

var $headerTable = $('#' + tableId).clone();
$('#header').append($headerTable);

var $header = $("#header");
$header.height($('#data table thead').height());

$('#wrapper').bind("scroll", function() {
    var offset = $(this).scrollTop();
    if (offset > 0) {
        $header.css("margin-top", offset);
    } else {
        $header.css("margin-top", 0);
    }
});