JSFiddle - React, Tailwind, and code Playground

by hoss

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 ($) {
    $.StickyTableHeaders = function (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;

        // Add a reverse reference to the DOM object
        base.$el.data('StickyTableHeaders', base);

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

            base.$el.each(function () {
                var $this = $(this);
                $this.wrap('<div class="divTableWithFloatingHeader" style="position:relative"></div>');

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

                clonedHeader.addClass('tableFloatingHeader');
                clonedHeader.css('position', 'fixed');
                clonedHeader.css('top', '0px');
                clonedHeader.css('left', $this.css('margin-left'));
                clonedHeader.css('display', 'none');

                originalHeader.addClass('tableFloatingHeaderOriginal');

                // enabling support for jquery.tablesorter plugin
                $this.bind('sortEnd', function (e) { base.updateCloneFromOriginal(originalHeader, clonedHeader); });
            });

            base.updateTableHeaders();
            $(window).scroll(base.updateTableHeaders);
            $(window).resize(base.updateTableHeaders);
        };

        base.updateTableHeaders = function () {
            base.$el.each(function () {
                var...