JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<table>
  <tbody>
    <tr>
      <td rowspan="24">1</td>
      <td rowspan="4">2</td>
      <td rowspan="6">3</td>
    </tr>
    <tr>
      <td rowspan="4">4</td>
      <td rowspan="6">5</td>
    </tr>
    <tr>
      <td rowspan="4">6</td>
      <td rowspan="6">7</td>
    </tr>
    <tr>
      <td rowspan="4">8</td>
      <td rowspan="6">9</td>
    </tr>
    <tr>
      <td rowspan="4">10</td>
    </tr>
    <tr>
      <td rowspan="4">11</td>
    </tr>
  </tbody>
</table>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}