JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="populate()">Test</button>

<table class="test-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>DOB</th>
      <th>Gender</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><label for="row1"></label>123</td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>


    <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>
        </tbody>
      </table>

CSS

table { border-collapse: collapse; overflow: hidden; } 
table table { display: none; margin: 10px; } 
input[type=checkbox] { display: none; } 
input[type=checkbox]:checked + table { display: table; width: calc(100% - 20px); } 
label { cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0; width: 1000px; z-index: 2; } 
label:hover { background: rgba(255, 255, 0, 0.2); } 
table > tbody > tr:nth-child(2n) > td { padding: 0; } 
table > tbody > tr:nth-child(2n) > td td { padding: 5px; } 
th, td { border: solid 1px #000; text-align: left; padding: 5px; position: relative; }