css3でtableのページングを実現する

余り褒められた方法ではないかと思うが，cssだけで実現するとすれば次のようになろうか．

• ページを切り替えるためのradioボタンを用意する．
  位置はtable要素の直前に配置する．（兄要素とする→下記の後続セレクタを有効とするため）
• radioボタンにlabel要素を紐付ける．
• radioボタン本体は非表示とし，label要素の見た目をリンクっぽく加工する．
• table要素内部のtr要素は非表示としておく．（display:none）
• radioボタンのchecked擬似クラス及び後続セレクタを用いてページごとに表示するtr要素を選択し，display値をtable-rowに再設定する．

ページングが必要となる程にテーブルの行数が増加する場合，サーバー-ブラウザ間の通信量を軽減するために事前にサーバー側でページング処理を施すのが通例であると思われる．そのため，このやり方はクライアント側で多数のデータを表示する際に使うものと言えるが，javascriptの構造上ブラウザで多数のデータを扱うのはいささか問題が多い．よって，理屈上では巧くいっても現実的な利用価値があるかと問われると疑問ではある．が，css3の応用例としてみれば面白いものが出来たのではないか．

12345

県名	count
北海道	1
青森県	2
岩手県	3
宮城県	4
秋田県	5
山形県	6
福島県	7
茨城県	8
栃木県	9
群馬県	10
埼玉県	11
千葉県	12
東京都	13
神奈川県	14
新潟県	15
富山県	16
石川県	17
福井県	18
山梨県	19
長野県	20
岐阜県	21
静岡県	22
愛知県	23
三重県	24
滋賀県	25
京都府	26
大阪府	27
兵庫県	28
奈良県	29
和歌山県	30
鳥取県	31
島根県	32
岡山県	33
広島県	34
山口県	35
徳島県	36
香川県	37
愛媛県	38
高知県	39
福岡県	40
佐賀県	41
長崎県	42
熊本県	43
大分県	44
宮崎県	45
鹿児島県	46
沖縄県	47
全国	---

<style type="text/css">
#pagingTableDiv{
    text-align:right;
    width:400px;
}
#pagingTableDiv > input[type=radio]{
    display:none;
}
#pagingTableDiv > label{
    display:inline-block;
    border:1px solid black;
    width:50px;
    text-align:center;
    text-decoration:underline;
}
#pagingTableDiv > input:checked + label{
    background-color:red;
}
#pagingTableDiv > #pagingTable{
    text-align:left;
    width:100%;
}
#pagingTableDiv > #pagingTable,#pagingTableDiv th,#pagingTableDiv td{
    border:solid 1px black;
}
#pagingTableDiv > #pagingTable > tbody > tr{
    display:none;
}
/*
行の選択を行うスタイル：10行毎に表示
事前に用意しておかないとダメといった制約があるので，100%自動化といったことは難しい．
*/
#pagingTableDiv > #page1:checked ~ #pagingTable > tbody > tr:nth-child(-n + 10){
    display:table-row;
}
#pagingTableDiv > #page2:checked ~ #pagingTable > tbody > tr:nth-child(-n + 20):not(:nth-child(-n + 10)){
    display:table-row;
}
#pagingTableDiv > #page3:checked ~ #pagingTable > tbody > tr:nth-child(-n + 30):not(:nth-child(-n + 20)){
    display:table-row;
}
#pagingTableDiv > #page4:checked ~ #pagingTable > tbody > tr:nth-child(-n + 40):not(:nth-child(-n + 30)){
    display:table-row;
}
#pagingTableDiv > #page5:checked ~ #pagingTable > tbody > tr:nth-child(-n + 50):not(:nth-child(-n + 40)){
    display:table-row;
}
</style>

<div id="pagingTableDiv">

<!--ページの選択-->
<input checked="checked" id="page1" name="page" type="radio" />
<label for="page1">1</label>
<input id="page2" name="page" type="radio" />
<label for="page2">2</label>
<input id="page3" name="page" type="radio" />
<label for="page3">3</label>
<input id="page4" name="page" type="radio" />
<label for="page4">4</label>
<input id="page5" name="page" type="radio" />
<label for="page5">5</label>

<!--ページング対象のテーブル-->
<table cellpadding="0" cellspacing="0" id="pagingTable"><thead>
<tr><th>県名</th><th>count</th></tr>
</thead>  <tbody>
<tr><td>北海道</td><td>1</td></tr>
<tr><td>青森県</td><td>2</td></tr>
<tr><td>岩手県</td><td>3</td></tr>
<tr><td>宮城県</td><td>4</td></tr>
<tr><td>秋田県</td><td>5</td></tr>
〜
<tr><td>沖縄県</td><td>47</td></tr>
</tbody>  
<tfoot>
<tr><td>全国</td><td>---</td></tr>
</tfoot> 
</table>
</div>