JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<table border="1">
		<thead>
			<tr class="head">
				<th>Month</th>
				<th>Year</th>
			</tr>
		</thead>
		<tbody>
			<tr class="start">
				<td>January</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>February</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>March</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>April</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>May</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>June</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>July</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>August</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>September</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>October</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>November</td>
				<td>2010</td>
			</tr>
			<tr class="end">
				<td>December</td>
				<td>2010</td>
			</tr>
			<tr class="start">
				<td>January</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>February</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>March</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>April</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>May</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>June</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>July</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>August</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>September</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>October</td>
				<td>2011</td>
			</tr>
			<tr>
				<td>November</td>
				<td>2011</td>
			</tr>
			<tr class="end">
				<td>December</td>
				<td>2011</td>
			</tr>
			<tr...

CSS

table{
        border:none;
    }
    tr{
		display:block;
	}
    td, th{
        width: 100px;
    }
	tbody tr.head {
		page-break-before: always;
		page-break-inside: avoid;
	}
	@media screen {
		tbody .head{
			display: none;
		}
	}

JavaScript

$(document).ready(function(){
		var head = $('table thead tr');
		$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
	});