JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<div class="view">
  <div class="wrapper">
    <table class="table" cellspacing="0">
      <thead>
        <tr>
          <th class="sticky-col first-col">Number</th>
          <th class=" second-col">First Name</th>
          <th>Last Name</th>
          <th>Employer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-col first-col">1</td>
          <td class="second-col">Mark</td>
          <td>Ham</td>
          <td>Micro</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">2</td>
          <td class="second-col">Jacob</td>
          <td>Smith</td>
          <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">3</td>
          <td class="second-col">Larry</td>
          <td>Wen</td>
          <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

td, th {
  border: 1px solid black;
  margin: 0px;
}

.wrapper {
  position: relative;
  overflow: auto;
  width: 60%;
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  z-index: 1;
  background-color: white;
}

.first-col  {width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}
.second-col {
  z-index: 5;
}