Tables pagination using full css - html

Question

Is it posible to do a full pagination table without javascript or jquery?
Actually i have this table:
<div class="datagrid">
<table>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tfoot>
<tr>
<td colspan="10">
<div id="paging">
<ul>
<li><span>Previous</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>Next</span></li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
</tbody>
</table>
</div>
With this CSS which was made with a random generator:
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #000000; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; }
.datagrid table td,
.datagrid table th { padding: 7px 9px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #808080), color-stop(1, #080808) );background:-moz-linear-gradient( center top, #808080 5%, #080808 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#080808');background-color:#808080; color:#00C2D0; font-size: 13px; font-weight: bold; border-left: 1px solid #000000; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #00496B; border-left: 1px solid #000000;font-size: 13px;font-weight: normal; }
.datagrid table tbody .alt td { background: #E0E0E0; color: #000000; }
.datagrid table tbody tr:hover td{color: #339; background: #ABECF0;}
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div { border-top: 1px solid #000000;background: #646464;}
.datagrid table tfoot td { padding: 0; font-size: 15px }
.datagrid table tfoot td div{ padding: 6px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px;color: #00C2D0;border: 1px solid #006699;-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #808080), color-stop(1, #080808) );background:-moz-linear-gradient( center top, #808080 5%, #080808 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#080808');background-color:#808080; }
.datagrid table tfoot ul.active, /* Probably here is the magic */
.datagrid table tfoot ul a:hover { text-decoration: none;border-color: #00C2D0; color: #FFFFFF; background: none; background-color:#000000;}
Question
How can i make it work to show just 5 rows with css?
Thanks in Advance

Answer 1

You can use like this
tr:nth-child(5) ~ tr{
display: none;
}
demo