JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:3000px">
        some really really wide content goes here
    </div>        
    <table>
            <thead>
               <tr>
                    <th colspan="9">
                        Companies listed on NASDAQ OMX Copenhagen.
                    </th>
               </tr>
               <tr>
                    <th>
                        Full name
                    </th>
                    <th>
                        CCY
                    </th>
                    <th>
                        Last
                    </th>
                    <th>
                        +/-
                    </th>
                    <th>
                        %
                    </th>
                    <th>
                        Bid
                    </th>
                    <th>
                        Ask
                    </th>
                    <th>
                        Volume
                    </th>
                    <th>
                        Turnover
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        A.P. Møller...
                    </td>
                    <td>
                        DKK
                    </td>
                    <td>
                        33,220.00
                    </td>
                    <td>
                        760
                    </td>
                    <td>
                        2.34
                    </td>
                    <td>
                        33,140.00
                    </td>
                    <td>
                        33,220.00
                    </td>
                    <td>
                        594
                    </td>
                    <td>
                        19,791,910
                    </td>
                </tr>
                <tr>
                    <td>
                        A.P. Møller...
               ...

CSS

body
{
    margin: 0 auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #555;
}
table
{
    border: 0;
    padding: 0;
    margin: 0 0 20px 0;
    border-collapse: collapse;
}
th
{
    padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
    text-align: right;        
    font-weight:bold;
    line-height: 2em;
    color: #FFF;
    background-color: #555;
}
tbody td
{
    padding: 10px;
    line-height: 18px;
    border-top: 1px solid #E0E0E0;
}
tbody tr:nth-child(2n)
{
    background-color: #F7F7F7;
}
tbody tr:hover
{
    background-color: #EEEEEE;
}
td
{
    text-align: right;
}
td:first-child, th:first-child
{
    text-align: left;
}

JavaScript

$(function(){
    $("table").stickyTableHeaders();
});
/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
    MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */

;(function ($, window, undefined) {
	'use strict';

	var name = 'stickyTableHeaders';
	var defaults = {
			fixedOffset: 0
		};

	function Plugin (el, options) {
		// To avoid scope issues, use 'base' instead of 'this'
		// to reference this class from internal events and functions.
		var base = this;

		// Access to jQuery and DOM versions of element
		base.$el = $(el);
		base.el = el;

		// Listen for destroyed, call teardown
		base.$el.bind('destroyed',
			$.proxy(base.teardown, base));

		// Cache DOM refs for performance reasons
		base.$window = $(window);
		base.$clonedHeader = null;
		base.$originalHeader = null;

		// Keep track of state
		base.isSticky = false;
		base.leftOffset = null;
		base.topOffset = null;

		base.init = function () {
			base.options = $.extend({}, defaults, options);

			base.$el.each(function () {
				var $this = $(this);

				// remove padding on <table> to fix issue #7
				$this.css('padding', 0);

				base.$originalHeader = $('thead:first', this);
				base.$clonedHeader = base.$originalHeader.clone();

				base.$clonedHeader.addClass('tableFloatingHeader');
				base.$clonedHeader.css('display', 'none');

				base.$originalHeader.addClass('tableFloatingHeaderOriginal');

				base.$originalHeader.after(base.$clonedHeader);

				base.$printStyle = $('<style type="text/css" media="print">' +
					'.tableFloatingHeader{display:none !important;}' +
					'.tableFloatingHeaderOriginal{position:static !important;}' +
					'</style>');
				$('head').append(base.$printStyle);
			});

			base.updateWidth();
			base.toggleHeaders();

			base.bind();
		};

		base.destroy = function (){
			base.$el.unbind('destroyed', base.teardown);
			base.teardown();
		};

		base.teardown = function(){
			if...