JSFiddle - React, Tailwind, and code Playground

by dafastestfingers

HTML

<div class="super-container">
  <div id="table1" class="table">
    <div class="table-header">
      <h4 class="table-title" colspan="4">
        tbl name
      </h4>
      <span class="table-description" colspan="4">
        this is my tbl description
      </span>
      <ul class="field-header">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
      </ul>
    </div><!-- end table-header -->
    <div class="table-body">
      <ul class="row">
        <li><a href="#">1a</a></li>
        <li><a href="#">1b</a></li>
        <li><a href="#">1c</a></li>  
        <li><a href="#">1d</a></li>
      </ul>
      <ul class="row">
        <li><a href="#">2a</a></li>
        <li><a href="#">2b</a></li>
        <li><a href="#">2c</a></li>
        <li><a href="#">2d</a></li>
      </ul>
      <ul class="row">
        <li><a href="#">3a</a></li>
        <li><a href="#">3b</a></li>
        <li><a href="#">3c</a></li>
        <li><a href="#">3d</a></li>
      </ul>
      <ul class="row">
        <li><a href="#">4a</a></li>
        <li><a href="#">4b</a></li>
        <li><a href="#">4c</a></li>
        <li><a href="#">4d</a></li>
      </ul>
      <ul class="row">
        <li><a href="#">5a</a></li>
        <li><a href="#">5b</a></li>
        <li><a href="#">5c</a></li>
        <li><a href="#">5d</a></li>
      </ul>
      <ul class="row">
        <li><a href="#">6a</a></li>
        <li><a href="#">6b</a></li>
        <li><a href="#">6c</a></li>
        <li><a href="#">6d</a></li>
      </ul>
    </div><!-- end table-body -->
  </div><!-- end table -->
</div>

CSS

div.table {
    margin: 5px 5px 5px 5px;
    width: 400px;
}
div.table-header {
    background: #bbb;
    border: solid 1px black;
    float: left;
    width: 100%;
}
h4.table-title {
    font: bold 1.3em tahoma;
    width: 100%;
}
span.table-description {
    border-bottom: solid 1px black;
    display: block;
    font: italic 0.8em tahoma;
    padding-bottom: 5px;
    width: 100%;
}
div.table-body {
    border: solid 1px black;
    border-top: none;
    height: 40px;
    float: left;
    overflow: auto;
    width: 100%;
}
ul.field-header {
    background: #888;
}
ul.field-header, ul.row {
    float: left;
    width: 100%;
}
ul.field-header li, ul.row li {
    float: left;
}
.highlight {
    background: #bbe;
}

JavaScript

$(document).ready(function(){
    funkyTable('#table1');
});

function funkyTable(tableId) {
    
    var tblWidth = $(tableId).width();
    
    var tblRowElements = $(tableId + ' div > ul');
    var tblColElements = tblRowElements.children();
    var tblLastCol = $(tableId + ' div > ul li:last-child');
    
    var numberOfRows = tblRowElements.length;
    var numberOfCols = tblColElements.length / numberOfRows;
    
    var colWidth = (tblWidth / numberOfCols);
    var lastColWidth = colWidth - 16;
  
    tblColElements.width(colWidth + 'px');
    tblLastCol.width(lastColWidth + 'px');
    
    tblColElements.hover(function() {
        var cellParentClass = $(this).parent('ul').attr('class');
        if (cellParentClass == 'row') {
            $(this).addClass('highlight');
        }
    }, function () {
        $(this).removeClass('highlight');
    });
}