JSFiddle - React, Tailwind, and code Playground

by dine

HTML

<table>
  <thead class="thead">
    <tr>
      <div class="header">Name</div>
      <div class="header">Color</div>
      <div class="header">Description</div>
    </tr>
  </thead>
  <tbody class="content">
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</td>
    </tr>
    
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red asd.</td>
    </tr>

  </tbody>
</table>

CSS

.thead > tr {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  
  grid-template-areas:
    "header header header"
}

.header {
  grid: 1fr/1fr;
}

.content {
  display: block;
  height: 200px;
  overflow-y: scroll;
}

.content > tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-area: content;
}

.content td {
  grid: auto-flow 1fr / repeat(auto-fill);
}