JSFiddle - React, Tailwind, and code Playground
HTML
<div style="height:200px;overflow:hidden;border:1px solid black;">
<table id="fixed" class="fancyTable">
<thead>
<tr>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
CSS
thead {
background:black;color:white;
}
/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/
/* @group Reset */
.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
/* position */
margin: 0;
/* size */
padding: 0;
/* text */
font-size: 100%;
font: inherit;
vertical-align: top;
}
.fht-table {
/* appearance */
border-collapse: collapse;
border-spacing: 0;
}
/* @end */
/* @group Content */
.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
/* appearance */
overflow: hidden;
/* position */
position: relative;
}
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
/* appearance */
overflow: auto;
}
.fht-table-wrapper .fht-table .fht-cell {
/* appearance */
overflow: hidden;
/* size */
height: 1px;
}
.fht-table-wrapper .fht-fixed-column,
.fht-table-wrapper .fht-fixed-body {
/* position */
top: 0;
left: 0;
position: absolute;
}
.fht-table-wrapper .fht-fixed-column {
/* position */
z-index: 1;
}
/* @end */
.divider {
margin-top: 40px;
}
.button {
/* appearance */
background-color: #3f3f3f;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.0) 0%,
rgba(255,255,255,0.1) 50%);
background-image: -webkit-gradient(
linear, left top, left...
JavaScript
/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2013 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/
(function(c) {
c.fn.fixedHeaderTable = function(m) {
var u = {
width: "100%",
height: "100%",
themeClass: "fht-default",
borderCollapse: !0,
fixedColumns: 0,
fixedColumn: !1,
sortable: !1,
autoShow: !0,
footer: !1,
cloneHeadToFoot: !1,
autoResize: !1,
create: null
}, b = {}, n = {
init: function(a) {
b = c.extend({}, u, a);
return this.each(function() {
var a = c(this);
h._isTable(a) ? (n.setup.apply(this, Array.prototype.slice.call(arguments, 1)), c.isFunction(b.create) && b.create.call(this)) : c.error("Invalid table mark-up")
})
},
setup: function() {
var a = c(this),
d = a.find("thead"),
e = a.find("tfoot"),
g = 0,
f, k, p;
b.originalTable = c(this).clone();
b.includePadding = h._isPaddingIncludedWithWidth();
b.scrollbarOffset = h._getScrollbarWidth();
b.themeClassName = b.themeClass;
f = -1 < b.width.search("%") ? a.parent().width() - b.scrollbarOffset : b.width - b.scrollbarOffset;
a.css({
width: f
});
a.closest(".fht-table-wrapper").length || (a.addClass("fht-table"), a.wrap('<div class="fht-table-wrapper"></div>'));
f = a.closest(".fht-table-wrapper");
!0 == b.fixedColumn && 0 >= b.fixedColumns && (b.fixedColumns = 1);
0 < b.fixedColumns && 0 == f.find(".fht-fixed-column").length && (a.wrap('<div class="fht-fixed-body"></div>'), c('<div class="fht-fixed-column"></div>').prependTo(f), k = f.find(".fht-fixed-body"));
f.css({
width: b.width,
height:...