JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<table>
  <thead>
    <tr>
      <th>col1</th><th>col2</th>
    </tr>
  </thead>
  <tbody>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
        <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
        <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr> <td>o</td><td>o</td></tr>
    <tr>...

SCSS

table {
  table-layout: fixed;
  width: 400px;
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin: 200px;

  th, td {
    padding: 10px;
  }
  
  th {
    position: sticky;
    top:0;
    background: #212121;
    text-align: left;
    color: #fff;
    
  }
  
  tr:nth-child(even) td {
    background: #f8f8f8;
  }
}