JSFiddle - React, Tailwind, and code Playground

by kelvinau

HTML

<p>
      In this example we build table using Div tags and we add rows span
      using CSS properties .
   </p>
<div class="wrapperDiv">
  <div class="table">
    <div class="Tablerow">
      <div class="Tablecell">
        Left Header
      </div>
      <div class="rowspanned Tablecell">
        Center Spanned Cell a 
      </div>
      <div class="Tablecell">
        Right Header
      </div>
    </div>
    <div class="Tablerow">
      <div class="Tablecell">
        Left Footer
      </div>
      <div class="empty Tablecell"></div>
      <div class="Tablecell">
        Right Footer
      </div>
    </div>
    
    <div class="Tablerow">
      <div class="Tablecell">
        Left Header
      </div>
      <div class=" Tablecell">
        Center Spanned Cell b
      </div>
      <div class="Tablecell">
        Right Header
      </div>
    </div>
    
    <div class="Tablerow">
      <div class="Tablecell">
        Left Header
      </div>
      <div class="rowspanned Tablecell">
        Center Spanned Cell c
      </div>
      <div class="Tablecell">
        Right Header
      </div>
    </div>
    
    <div class="Tablerow">
      <div class="Tablecell">
        Left Header
      </div>
      <div class="empty Tablecell">
        
      </div>
      <div class="Tablecell">
        Right Header
      </div>
    </div>    
 
    
  </div>
</div>

CSS

.wrapperDiv {
    position: relative;
  }
  .table {
    display: table;
  }
  .Tablerow {
    display: table-row;
  }
  .Tablecell {
    border: 2px solid #54FF93;
    display: table-cell;
  }
  .Tablecell.empty
  {
    border: none;
    width: 150px;
  }
  .Tablecell.rowspanned {
    border: 2px solid #54FE43;
    position: absolute;
    width: 150px;
    top: 0;
    bottom: 0;
  }