JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum Aliquip id est reprehenderit anim.</td>
<td>Lorem ipsum Pariatur esse laboris anim qui tempor incididunt aliquip anim dolore non aute aliqua veniam sed aliquip reprehenderit aliquip.</td>
</tr>
<tr>
<td>Lorem ipsum Aliqua eu ut minim magna ullamco.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse similique dolorum, aspernatur id? Libero, ipsa quia aspernatur mollitia excepturi voluptatum, obcaecati distinctio totam atque qui illum perferendis laudantium odit.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cupiditate repellendus saepe consequuntur earum, explicabo ipsam veritatis at sequi recusandae perferendis sed laboriosam commodi pariatur asperiores numquam, expedita iusto animi.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, aperiam, dolorem! Quo optio id ad porro aut, incidunt eveniet quibusdam soluta illum. Porro animi in sed voluptatibus laborum illum aliquam.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem...
CSS
.table {
border-collapse: collapse;
width: 100%;
}
.table td,
.table th {
background: #fff;
padding: 15px;
}
.table th {
border-bottom: solid #999 2px;
font-weight: bold;
}
.table tbody td {
border-bottom: solid #ccc 1px;
}
.table tfoot td {
border-top: solid #999 2px;
}
JavaScript
/**
* jquery-sticky-hooters v0.0.1
* Lightweight jQuery plugin providing sticky header and footer functionality for tables and lists.
*
* @module jquery-sticky-hooters
* @extends jQuery
* @requires jQuery throttle/debounce v1.1
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* @example
* // Configuration object is optional if setting up a table
* // with a sticky header and sticky footer.
* $(<your-list-container>).stickyHooters({
* // these are in the context of <your-list-container>
* footerSelector: '<footer-selector>', // {String} default is 'tfoot'
* headerSelector: '<header-selector>' // {String} default is 'thead',
* top: '<number><units>', // {String} (CSS value) default is '0'
* bottom: '<number><units>' // {String} (CSS value) default is '0'
* });
*
* @author Kevin Boucher
* @license Dual licensed under MIT and GNU GPL
*/
;(function($, window, document, undefined) {
'use strict';
// Defaults and constants
var pluginName = 'stickyHooters',
defaults = {
footerSelector: 'tfoot',
headerSelector: 'thead',
top: '0',
bottom: '0'
},
classNames = {
outerWrapper: 'sticky-hooters_wrapper',
innerWrapper: 'sticky-hooters_sticky-wrapper',
innerWrapperHead: 'sticky-hooters_sticky-header',
innerWrapperFoot: 'sticky-hooters_sticky-footer',
};
// StickyHooters constructor
function StickyHooters(element, options) {
var elmRect;
this.element = element;
this.settings = $.extend({}, defaults, options);
this.footerElement = $(this.settings.footerSelector, this.element)[0];
this.headerElement = $(this.settings.headerSelector, this.element)[0];
this.isTable = this.element.tagName.toLowerCase() === 'table';
...