JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
</tr>
</thead>
</table>
<table style="width:487px;height:144px;overflow:auto;display:block;">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">- some optional text, this row may or may not exist -</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">- some optional text, this row may or may not exist -</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">- some optional text, this row may or may not exist -</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">- some optional text, this row may or may not exist -</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">- some optional text, this row may or may not exist -</td>
</tr>
</tbody>
</table>
CSS
td,th{
width:72px;
border:solid 1px;
}
tbody:nth-child(2n){
background:aqua;
}