JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<div>
  <p>
  This is how it should look
  </p>
  <table class="my-table">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Phone</th>
      <th>Age</th>
    </tr>
  </table>
  <table class="my-table">
    <tr>
      <td colspan=2 rowspan=2>Jill Smith<br />Eve Jackson</td>
      <td class="hide-column">Smith</td>
      <td>1234567890</td>
      <td>50</td>
    </tr>
    <tr>
      <td class="hide-column">Eve</td>
      <td class="hide-column">Jackson</td>
      <td>0987654321</td>
      <td>94</td>
    </tr>
  </table>
</div>
<div>
  <p>
  This is what I'm working with (2 tables that need to be joined)
  </p>
  <table class="my-table">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Phone</th>
      <th>Age</th>
    </tr>
  </table>
  <table class="my-table">
    <tr>
      <td colspan=2 rowspan=2>Jill Smith<br />Eve Jackson</td>
      <td class="hide-column">Smith</td>
      <td>1234567890</td>
      <td>50</td>
    </tr>
  </table>
  <table class="my-table">
    <tr>
      <td class="hide-column">Eve</td>
      <td class="hide-column">Jackson</td>
      <td>0987654321</td>
      <td>94</td>
    </tr>
  </table>
</div>

CSS

.my-table {
  width: 100%;
  table-layout: fixed;
}

.hide-column {
  display: none;
}

td {
  border: 1px solid #cecece;
}