JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>Table</title>
  <!-- <link rel="stylesheet" href="./style.css"> -->

</head>

<head>
  <style type="text/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: 10000px;
      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;
    }
  </style>



</head>

<body>
  <!-- partial:index.partial.html -->
  <h1>Table</h1>
  <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>
             ...