JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="mytable twst">

      <div class="thead">
        <div class="trow">
          <div class="tcell tcell--10">Table Header 1</div>
          <div class="tcell tcell--30">Table Header 2</div>
          <div class="tcell tcell--60 twst__autoscroll">
            <div class="tcell tcell--10">Table Header 3</div>
            <div class="tcell tcell--20">Table Header 4</div>
            <div class="tcell tcell--30">Table Header 5</div>
            <div class="tcell tcell--10">Table Header 5</div>
            <div class="tcell tcell--30">Table Header 6</div>
          </div>
        </div>
      </div><!-- /thead -->

      <div class="tbody">

          <div class="trow">
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</div>
          </div>
          <div class="trow">
            <div class="tcell tcell--full" style="color:white;background-color:black">Full width cell</div>
          </div>
          <div class="trow">
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</div>
            <div class="tcell">Content Goes Here</div>
            <div class="tcell">This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</div>
  ...

CSS

* {
  -webkit-box-sizing: border-box;
  moz-box-sizing: border-box;
  box-sizing: border-box; }

.twst .thead, .twst .tbody {
  position: relative; }
  .twst .thead:before, .twst .thead:after, .twst .tbody:before, .twst .tbody:after {
    content: " ";
    display: table; }
  .twst .thead:after, .twst .tbody:after {
    clear: both; }
.twst .trow:before, .twst .trow:after {
  content: " ";
  display: table; }
.twst .trow:after {
  clear: both; }
.twst .tcell, .twst__scroll {
  overflow: hidden;
  float: left; }
.twst .tcell--10 {
  width: 10%; }
.twst .tcell--20 {
  width: 20%; }
.twst .tcell--30 {
  width: 30%; }
.twst .tcell--40 {
  width: 40%; }
.twst .tcell--50 {
  width: 50%; }
.twst .tcell--60 {
  width: 60%; }
.twst .tcell--70 {
  width: 70%; }
.twst .tcell--80 {
  width: 80%; }
.twst .tcell--90 {
  width: 90%; }
.twst .tcell--100 {
  width: 100%; }
.twst__autoscroll {
  overflow: hidden;
  float: left; }
.twst .thead .twst__autoscroll {
  margin-right: -1px; }
.twst__scroll {
  position: absolute;
  top: 0;
  right: 0;
  overflow: auto; }
  .twst__scroll__view {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0; }

.twst__autoscroll {
  background-color: rgba(255, 255, 100, 0.1); }
.twst__scroll {
  background-color: rgba(255, 100, 100, 0.1); }
.twst .trow {
  border-bottom: solid 1px #c8c8c8; }
  .twst .trow:before, .twst .trow:after {
    content: " ";
    display: table; }
  .twst .trow:after {
    clear: both; }
  .twst .trow:nth-child(even) {
    background: rgba(0, 0, 0, 0.05); }
  .twst .trow:nth-child(odd) {
    background: transparent; }
.twst .thead .trow {
  background: rgba(0, 0, 0, 0.2); }
.twst .tcell {
  padding: 3px; }

JavaScript

!function(s){s.fn.twst=function(l){var t=s.extend({xscroll:1e3,height:250,theadClass:"thead",tbodyClass:"tbody",rowClass:"trow",cellClass:"tcell",fullwidthcellModifier:"--full",autoScrollClass:"twst__autoscroll",scrollClass:"twst__scroll",scrollViewClass:"twst__scroll__view"},l);return this.each(function(){var l=s(this),o=l.find("."+t.theadClass),a=l.find("."+t.tbodyClass),e=o.find("[class*="+t.cellClass+"--]").not("."+t.autoScrollClass),i=e.filter(function(){return s(this).parent().is("."+t.rowClass)}),r=o.find("."+t.autoScrollClass),n=s("<div/>").addClass(t.autoScrollClass).appendTo(a),c=s("<div/>").addClass(t.scrollClass).appendTo(a),d={},h=[],f=i.length-1;s.each(a.find("."+t.rowClass),function(l,o){var a=s(o),i=a.find("."+t.cellClass),r=s("<div/>").addClass(t.rowClass),n=i;if(i.first().is("."+t.cellClass+t.fullwidthcellModifier)){var u=i.first().removeClass(t.cellClass),C=u.clone().empty();r.append(C),n=n.add(C)}else s.each(i,function(l,t){"undefined"==typeof d["c"+l]&&(d["c"+l]={$from:e.eq(l),$to:s([])});var o=s(t);d["c"+l].$to=d["c"+l].$to.add(o),l>f&&r.append(o)});h.push(n),c.append(r)}),n.append(a.find("> ."+t.rowClass)),d.scrollwidth={$from:r,$to:c},r.wrapInner(s("<div/>").width(t.xscroll)),c.wrapInner(s("<div/>").width(t.xscroll)),c.on("scroll",function(){n.scrollTop(c.scrollTop()),r.scrollLeft(c.scrollLeft())});var u=function(){s.each(d,function(s,l){{var o=l.$from;o.closest("."+t.rowClass)}l.$to.outerWidth(o.outerWidth())})},C=function(){s.each(h,function(l,t){var o=s(t),a=0;s.each(o,function(){a=Math.max(a,s(this).outerHeight())}),o.outerHeight(a)})},w=function(){var l=t.height-o.outerHeight();c.css("max-height",l),n.css("max-height",l);var a=s("<div/>").addClass(t.scrollViewClass);c.append(a),r.outerWidth(a.width()),n.outerHeight(a.height()),a.remove()},p=function(){r.css("width","")};s(window).on("resize",function(){p(),u(),C(),w()}),u(),C(),w()})}}(jQuery);


$('.mytable').twst();