html - 使用完整 css 的表格分页

Question

是否可以在没有 javascript 或 jquery 的情况下做一个完整的分页表？其实我有这张 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><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;}

问题

如何使用 css 让它只显示 5 行？

提前致谢

Answer 1

你可以这样使用

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

demo