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

.super-container {
        margin: 0 auto;
        width: 900px;
      }
      .table {
        float: left;
        margin-bottom: 0.5em;
        text-indent: 0.2em;
        padding: 0.1em;
        width: 100%;
      }
      .table-header {
        font: bold 1.3em tahoma;
        width: 100%;
      }
      .table-description {
        display: block;
        font: italic 0.8em tahoma;
        text-indent: 0.6em;
        width: 100%;
      }
      .field-header {
        font: bold 1em tahoma;
        width: 100%;
      }
      .field-header, .row {
        display: block;
        float: left;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
        width: 100%;
      }
      .field-header li, .row li {
        display: block;
        float: left;
        font-size: 1em;
        height: 1.4em;
        line-height: 1.4em;
      }

JavaScript

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

function setColumnWidths(tbl) {
    var tblRowElements = $(tbl + ' > ul');
    var tblColElements = tblRowElements.children();
    var numberOfRows = tblRowElements.length;
    var numberOfCols = tblColElements.length / numberOfRows;

    tblColElements.width( (100/numberOfCols + "%") );

}