JSFiddle - React, Tailwind, and code Playground

by Jules Roman Polidario

HTML

<style>
  td:empty {
    display: none;
  }
  
  /* UNCOMMENT BELOW TO FIX! */
  /* td:empty {
     display: table-cell !important;
  } */
</style>
<table class='show-table-cells'>
  <tr>
    <th>
      Header1
    </th>
    <th>
      Header2
    </th>
    <th>
      Header3
    </th>
    <th>
      Header4
    </th>
  </tr>
  <tr>
    <td></td>
    <td>Content12</td>
    <td></td>
    <td>Content14</td>
  </tr>
  <tr>
    <td>Content21</td>
    <td></td>
    <td>Content23</td>
    <td>Content24</td>
  </tr>
  <tr>
    <td>Content31</td>
    <td>Content32</td>
    <td></td>
    <td>Content34</td>
  </tr>
</table>

CSS

// there's seem to be some bug in jsfiddle, that's why I put the styles
// on the HTML pane on the left instead of here