JSFiddle - React, Tailwind, and code Playground

by Balkanlii

HTML

<table>
<header>
  <th>Name</th>
  <th>Score</th>
  <th>Address</th>
  <th>Description</th>
</header>
<tr class='hideextra'>
  <td>
   John Jonathan Valdez
  </td>
  <td>
   244
  </td>
  <td>
   123 ABC Street. New York, USA
  </td>
  <td>
   He has been working with us for 19 years and currently he is the manager of our corporation
  </td>
</tr>
<tr class='hideextra'>
  <td>
   John Jonathan Valdez
  </td>
  <td>
   244
  </td>
  <td>
   123 ABC Street. New York, USA
  </td>
  <td>
   He has been working with us for 19 years and currently he is the manager of our corporation
  </td>
</tr>
</table>

CSS

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
 tbody tr > :first-child {
          background:white;
          position: sticky;
          z-index:2;
          left:0;
        }

        tbody tr > :nth-child(2) {
          background: white;
          position: sticky;
          z-index:1;
          left: 145px;
        }
thead th {
            position: sticky;
            z-index: 12;
            top: 51px;
            background: white;
        }
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }