JSFiddle - React, Tailwind, and code Playground

by Pritam Bohra

HTML

<table class="sturdy">
      <thead>
       <!--  <div class="test"> -->
          <tr>
              <th>ID<th>
              <th>First Name</th>
              <th>Middle Name</th>
              <th>Last Name</th>
              <th>Date of Birth</th>
            </tr>
       <!--  </div> -->
      </thead>
    
      <tbody>
        <!-- <div class="test" *ngFor="let attribute of attributes"> -->
          <tr>
            <td>{{ attribute[0] }}</td>
            <td>{{ attribute[1] }}</td>
            <td>{{ attribute[2] }}</td>
            <td>{{ attribute[3] }}</td>
            <td>{{ attribute[4] }}</td>
          </tr>
        <!-- </div> -->
      </tbody>
    </table>

CSS

td, th {
        border: 1px solid black;
    }
    
    table {
        margin: 15px 0;
        border: 1px solid black;
        table-layout: fixed;
        width: 100%;
    }
    
    body {
        margin: 0 auto;
        padding: 10px;
    }
    
    .sturdy th:nth-child(1),
    .sturdy th:nth-child(2),
    .sturdy th:nth-child(3),
    .sturdy th:nth-child(4),
    .sturdy th:nth-child(5) {
        width: 20%;
    }