JSFiddle - React, Tailwind, and code Playground

by GlennLinderman

HTML

<table id="st2" border="1" cellpadding="2" cellspacing="0" width="100%">
    <thead>
      <tr><th>column 1</th><th>column 2 has a really long header description</th></tr>
    </thead>
    <tfoot>
      <tr><th>bottom 1 has a really long footer description</th><th>bottom 2</th></tr>
      <tr><th>second footer line</th><th>more</th></tr>
    </tfoot>
    <tbody>
      <tr><td>abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.</td><td><br></td></tr>
      <tr><td><br></td><td>def</td></tr>
      <tr><td>ghi</td><td>jkl</td></tr>
      <tr><td>mno</td><td>pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.</td></tr>
      <tr><td>stu</td><td>vwx</td></tr><tr><td><br></td><td>yz</td></tr>
      <tr><td><br></td><td><br></td></tr>
    </tbody>
  </table>
<p>Ultimate scrolling table works with desktop and mobile browsers, dynamically adapts to scrollbar width, header and footer height and existence. Just specify the table id, height, and width. <a target="_blank" href="http://nevcal.com/eclectic/UltimateScrollingTable.html">More description.</a>

CSS

tr:nth-child(even)
{
background: #e3eeee;
}

th
{
background-color: #c69833;
text-align: center;
}

JavaScript

/* See http://nevcal.com/eclectic/UltimateScrollingTable.html */
/* Written by Glenn Linderman. Integration with sorttable.js from
   http://www.kryogenix.org/code/browser/sorttable/
   funded by Larry Martell: [email protected]
*/
function UltimateScrollingTable( tabId, height, width, sortId )
{ var __version__ = '14.7.17';

  /* Create the variables for the closure */
  var windowWidth;
  var windowHeight;
  var scrollWidth;
  var scrollHeight;
  var naturalWidth;
  var naturalHeight;

  var tHeadMC;
  var tBodyMC;
  var tFootMC;
  var thMC;
  var divHR; /* only if there is a header */
  var thHR;
  var tabHR;
  var divFR; /* only if there is a footer */
  var thFR;
  var tabFR;

  var withinWindow = 0;
  var overX = 'scroll'; // unused
  var overY = 'scroll';
  var widthToUse;
  var tabWidthToUse;
  var hdrWidthToUse;
  var heightToUse;
  var scrollHeightToUse;
  var headerHeight = 0;
  var footerHeight = 0;

  var divRoot = document.createElement('div');

  /* other variables */
  var tabRoot = document.getElementById( tabId );
  var parent = tabRoot.parentNode;
  var divMC = document.createElement('div');
  var maxWidth = 10000;
  var tHeadHR;
  var tHeadFR;
  var convertMCIds;
  /* temporary usage */
  var UST, ix, iy;

  /* must do this for each of the cloned tables */
  function getGrandChildThList( headTag )
  { var t1 = headTag.getElementsByTagName('th');
    t1 = Array.prototype.slice.call( t1 );
    return t1;
  }

  /* calculate the parameters */
  UST = tabRoot.getAttribute('data-ustoverflow-x');
  if ( UST !== null )
  { if ( UST === "within-window" )
    { withinWindow = 1;
    } else
    { overX = UST;
    }
  }
  UST = tabRoot.getAttribute('data-ustoverflow-y');
  if ( UST !== null )
  { overY = UST; }
  convertMCIds = 0;
  UST = tabRoot.getAttribute('data-ustmcids');
  if ( UST !== null ) { convertMCIds = 1; }
  if ( sortId === undefined )
  { sortId = tabRoot.getAttribute('data-ustsort');
    if ( sortId )
    { ix = Number( sortId,...