チェックボックスのエラーを修正したいです・・・

http://www.webantena.net/css/input-type-checkbox-checked/
上記のサイトを参考にチェックボックスにチェックを入れた時に要素に変化を付ける方法を探していました。
一応できていますが、webapiから取得した10件の情報のうち、二つ目のtableから（2件目から）<label></label>部分をクリックすると1件目のtaleのlabelに戻ってしまいます。一件目のtableのチェックボックスをクリックしても動作に不備がありません。
つまり、サイトのようなチェックボックスを作ることはできません。
ちなみに、写真のような場合だと、二件目以降のtableのチェックボックスでも動作します。ただし、labelをクリックすると1件目のtableのlabelを押したことになり、1件目のtableに戻ってしまいます。

長い話になりましたが、話をまとめると、

・label(名前の部分)をクリックすると、一件目のtableのチェックボックスをクリックしたことになります。
・サイトのようなチェックボックスとラベルを同化させたチェックボックスを設置すると二件目以降のtableのチェックボックスをクリックしても動作しません。
以上が今回の問題があります。

html
1<style>
2input[type=checkbox] {
3position: absolute;
4top: 15px;
5left: 20px;
6}
7label {
8display: block;
9width:200px;
10text-align:center;
11font-weight: bold;
12color: #fff;
13background: #e54040;
14border:1px solid #dd0000;
15-webkit-border-radius:4px;
16-mozborder-radius:4px;
17border-radius:4px;
18padding: 5px;
19cursor:pointer
20}
21input[type=checkbox]:checked ~ table.ff {
22display:block;
23}
24table.ff {
25display:none;
26}
27</style>
28<table>
29<tr>
30<td>
31<input type="checkbox" id="toggle">
32<label for="toggle">
33Toggle Button
34</label>
35<table class="ff"> 
36<tr>
37<td>
38$r->name
39</td>
40</tr>
41<tr>
42<td>
43$r->access
44</td>
45</tr>
46</table>
47</td>
48</tr>
49</table>

行動規範の内容に同意します

回答1件

ベストアンサー

position:absoluteは画面から飛ばしたりするズルなので
相対的な位置をとっていきたいならrelative
topやmargin-topはボタンのサイズなどと調整ください

HTML
1<style>
2input[type=checkbox] {
3position:relative;
4top: 27px;
5left: 20px;
6  margin-top:-20px;
7}
8label {
9display: block;
10width:200px;
11text-align:center;
12font-weight: bold;
13color: #fff;
14background: #e54040;
15border:1px solid #dd0000;
16-webkit-border-radius:4px;
17-mozborder-radius:4px;
18border-radius:4px;
19padding: 5px;
20cursor:pointer
21}
22input[type=checkbox]:checked ~ table.ff {
23display:block;
24}
25table.ff {
26display:none;
27}
28</style>
29<table>
30<tr>
31<td>
32<input type="checkbox" id="toggle1">
33<label for="toggle1">
34Toggle Button1
35</label>
36<table class="ff"> 
37<tr>
38<td>
39name1
40</td>
41</tr>
42<tr>
43<td>
44access1
45</td>
46</tr>
47</table>
48</td>
49</tr>
50<tr>
51<td>
52<input type="checkbox" id="toggle2">
53<label for="toggle2">
54Toggle Button2
55</label>
56<table class="ff"> 
57<tr>
58<td>
59name2
60</td>
61</tr>
62<tr>
63<td>
64access2
65</td>
66</tr>
67</table>
68</td>
69</tr>
70<tr>
71<td>
72<input type="checkbox" id="toggle3">
73<label for="toggle3">
74Toggle Button3
75</label>
76<table class="ff"> 
77<tr>
78<td>
79name3
80</td>
81</tr>
82<tr>
83<td>
84access3
85</td>
86</tr>
87</table>
88</td>
89</tr>
90</table>