Таблицы с разбивкой по страницам с использованием полного css

Question

Возможно ли выполнить полную таблицу разбиения на страницы без javascript или jquery? На самом деле у меня есть эта таблица:

<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><a href="#"><span>Previous</span></a></li> 
              <li><a href="#" class="active"><span>1</span></a></li> 
              <li><a href="#"><span>2</span></a></li> 
              <li><a href="#"><span>3</span></a></li> 
              <li><a href="#"><span>4</span></a></li> 
              <li><a href="#"><span>5</span></a></li> 
              <li><a href="#"><span>Next</span></a></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> 

С этим CSS, который был сделан с генератором случайных чисел:

.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;} 

Вопрос

Как я могу заставить его работать, чтобы показать только 5 строк с css?

Заранее спасибо

Answer 1

Вы можете использовать как этот

tr:nth-child(5) ~ tr{ 
    display: none; 
} 

demo