experiments for colspan

comparing (failed) attempts at colspan-replacement for css-tables vs actual colspan in actual table.

by hrabinowitz

HTML

<div class="table">
  <div class="row">
    <span class="cell red first">To handle colspan-like feature, </span>
    <span class="cell blue fill">To handle colspan-like feature, </span>
    <span class="cell green last">To handle colspan-like feature, </span>
  </div>
  <div class="row">
    <span class="cell red first">1</span>
    <span class="cell blue fill">2</span>
    <span class="cell green last">3</span>
  </div>
  <div class="row">
    <div class=" black fill">abc</div>
  </div>
</div>

<table>
  <tr>
    <td class="cell red first">To handle colspan-like feature, </td>
    <td class="cell blue fill">To handle colspan-like feature, </td>
    <td class="cell green last">To handle colspan-like feature, </td>
  </tr>
  <tr class="row">
    <td class="cell red first">1</td>
    <td class="cell blue fill">2</td>
    <td class="cell green last">3</td>
  </tr>
  <tr class="row">
    <td class="cell black fill" colspan="3">abc</td>
    
  </tr>
</table>

CSS

/* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:400px; border-collapse: collapse; }
  .row { display:table-row; height:40px; }
  .cell { display:table-cell; border: 1px solid black; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; color: white; height: 50px; column-span:all; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 40px; }
  .last { width: 60px; }
  .fill { width: 100%; }