JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<table id="data">
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>Red</td>
          <td>These are red.</td>
        </tr>
        <tr>
          <td>Pear</td>
          <td>Green</td>
          <td>These are green.</td>
        </tr>
        <tr>
          <td>Grape</td>
          <td>Purple / Green</td>
          <td>These are purple and green.</td>
        </tr>
        <tr>
          <td>Orange</td>
          <td>Orange</td>
          <td>These are orange.</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>Yellow</td>
          <td>These are yellow.</td>
        </tr>
        <tr>
          <td>Kiwi</td>
          <td>Green</td>
          <td>These are green.</td>
        </tr>
        <tr>
          <td>Plum</td>
          <td>Purple</td>
          <td>These are Purple</td>
        </tr>
        <tr>
          <td>Watermelon</td>
          <td>Red</td>
          <td>These are red.</td>
        </tr>
        <tr>
          <td>Tomato</td>
          <td>Red</td>
          <td>These are red.</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>Red</td>
          <td>These are red.</td>
        </tr>
        <tr>
          <td>Cantelope</td>
          <td>Orange</td>
          <td>These are orange inside.</td>
        </tr>
        <tr>
          <td>Honeydew</td>
          <td>Green</td>
          <td>These are green inside.</td>
        </tr>
        <tr>
          <td>Papaya</td>
          <td>Green</td>
          <td>These are green.</td>
        </tr>
        <tr>
          <td>Raspberry</td>
          <td>Red</td>
          <td>These are red.</td>
        </tr>
        <tr>
          <td>Blueberry</td>
          <td>Blue</td>
          <td>These are blue.</td>
        </tr>
        <tr>
          <td>Mango</td>
          <td>Orange</td>
          <td>These are...

CSS

#data {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid red;
}
#data th {
    text-decoration: underline;
    border: 1px solid blue;
}
#data td {
    border: 1px solid blue;
}
#data th, #data td {
  padding: 5px;
  text-align: left;
  width: 150px;
}
#data thead {
  background-color: #333333;
  color: #fdfdfd;
}
#data thead tr {
  display: block;
  position: relative;
}
#data tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
#data tbody tr:nth-child(even) {
  background-color: #dddddd;
}

#data tbody > tr:last-child > td {
  border-bottom: 0;
}