常連

###前提・実現したいこと
[css だけで作る フォトギャラリー・スライドショー](http://css.programming.jp/?p=136)
上記のサイトを参考にスライドショーを作成しているのですが、table内に２つ以上のスライドショーを作成する方法でつまずいています。解決方法を教えていただけると幸いです。

###該当のソースコード
```HTML
<table>
	<tr>
        <th>名前</th>
        <td>内容</td>
        <td width="150">内容</td>
        <td width="150">内容</td>
	<td>
	
	<div id="stage3">
  	 <input type="radio" id="back3_2" name="gal" checked>
  	 <input type="radio" id="back3_3" name="gal">
  	 <input type="radio" id="next3_1" name="gal">
  	 <input type="radio" id="next3_2" name="gal">
  	 <div id="b_btn3">
    	 <label for="back3_2"><div id="left3_2" class="cover_left3"><span>＜</span></div></label>
    	 <label for="back3_3"><div id="left3_3" class="cover_left3"><span>＜</span></div></label>
   	 </div>
  	 <div id="n_btn3">
  	 <label for="next3_1"><div id="right3_1" class="cover_right3"><span>＞</span></div></label>
    	 <label for="next3_2"><div id="right3_2" class="cover_right3"><span>＞</span></div></label>
    	 <label for="next3_3"><div id="right3_3" class="cover_right3"><span>＞</span></div></label>
  	 </div>
  	 <div id="photos3">
    	 <div class="photo" id="photo3_1" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
    	 <div class="photo" id="photo3_2" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
    	 <div class="photo" id="photo3_3" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
  	 </div>
	 </div>
	</td>
	</tr>	

        <tr>
        <th>名前</th>
        <td>内容</td>
        <td width="150">内容</td>
        <td width="150">内容</td>
        <td>
        
        <div id="stage4">
         <input type="radio" id="back4_2" name="gal" checked>
         <input type="radio" id="back4_3" name="gal">
         <input type="radio" id="next4_1" name="gal">
         <input type="radio" id="next4_2" name="gal">
         <div id="b_btn4">
         <label for="back4_2"><div id="left4_2" class="cover_left4"><span>＜</span></div></label>
         <label for="back4_3"><div id="left4_3" class="cover_left4"><span>＜</span></div></label>
         </div>
         <div id="n_btn4">
         <label for="next4_1"><div id="right4_1" class="cover_right4"><span>＞</span></div></label>
         <label for="next4_2"><div id="right4_2" class="cover_right4"><span>＞</span></div></label>
         <label for="next4_3"><div id="right4_3" class="cover_right4"><span>＞</span></div></label>
         </div>
         <div id="photos4">
         <div class="photo" id="photo4_1" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
         <div class="photo" id="photo4_2" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
         <div class="photo" id="photo4_3" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div>
         </div>
         </div>

        </td>
        </tr>
</table>
```

```CSS

/*全体のコンテナー*/
#stage3{
	position: relative;
	width: 240px;
	height: 240px;
	margin: 0 auto;
	overflow:hidden;
}
/*全てのラジオボタンを非表示に*/
#back3_1{ display:none;}
#next3_1{ display:none;}
#back3_2{ display:none;}
#next3_2{ display:none;}
#back3_3{ display:none;}
#next3_3{ display:none;}
#back3_4{ display:none;}
#next3_4{ display:none;}
#back3_5{ display:none;}
#next3_5{ display:none;}

/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/
#photos3 {
	position:absolute;
	top:0;
        width:800px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}


/*各写真の並び位置を設定*/
#photo3_1{ 
		position:relative;
		float:left;
		}
#photo3_2{ 
		position:relative;
		float:left;
		}
#photo3_3{ 
		position:relative;
		float:left;
		}
#photo3_4{ 
		position:relative;
		float:left;
		}
#photo3_5{ 
		position:relative;
		float:left;
		}
/*ボタン領域の設定*/
.cover_left3, .cover_right3 {
	position:absolute;
	top:0;
	width:50px;
	height:240px;
	display:none;
	cursor:pointer;
	z-index:101;
}
.cover_left3 {
	left:0;
}
.cover_right3 {
	left:100px;
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left3 span, .cover_right3 span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 140px;
}
.cover_left3 span {
	left: 10px;	
}
.cover_right3 span {
	left: 100px
}
/*ボタン領域hover時文字の設定*/
.cover_right3:hover > span,.cover_left3:hover > span {
	opacity:1;
	color:#EEE;
}
#right3_1{ display:none; }
#left3_2{ display:none;} 
#right3_2{ display:none; }
#left3_3{ display:none;} 
#right3_3{ display:none; }
#left3_4{ display:none;} 
#right3_4{ display:none; }
#left3_5{ display:none;} 

/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/

#back3_2:checked ~ #photos3 { left:0; }
#back3_3:checked ~ #photos3,#next3_1:checked ~ #photos3 { left:-240px; }
#back3_4:checked ~ #photos3,#next3_2:checked ~ #photos3 { left:-480px; }
#back3_5:checked ~ #photos3,#next3_3:checked ~ #photos3 { left:-720px; }
#next3_4:checked ~ #photos3 { left:-2400px; }

/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/
#back3_2:checked ~ #n_btn3 label #right3_1 { display:block; }
#back3_3:checked ~ #b_btn3 label #left3_2,#back3_3:checked ~ #n_btn3 label #right3_2 { display:block; }
#back3_4:checked ~ #b_btn3 label #left3_3,#back3_4:checked ~ #n_btn3 label #right3_3 { display:block; }
#back3_5:checked ~ #b_btn3 label #left3_4,#back3_5:checked ~ #n_btn3 label #right3_4 { display:block; }
#next3_1:checked ~ #b_btn3 label #left3_2,#next3_1:checked ~ #n_btn3 label #right3_2 { display:block; }
#next3_2:checked ~ #b_btn3 label #left3_3,#next3_2:checked ~ #n_btn3 label #right3_3 { display:block; }
#next3_3:checked ~ #b_btn3 label #left3_4,#next3_3:checked ~ #n_btn3 label #right3_4 { display:block; }
#next3_4:checked ~ #b_btn3 label #left3_5 { display:block; }





/*全体のコンテナー*/
#stage4{
	position: relative;
	width: 240px;
	height: 240px;
	margin: 0 auto;
	overflow:hidden;
}
/*全てのラジオボタンを非表示に*/
#back4_1{ display:none;}
#next4_1{ display:none;}
#back4_2{ display:none;}
#next4_2{ display:none;}
#back4_3{ display:none;}
#next4_3{ display:none;}
#back4_4{ display:none;}
#next4_4{ display:none;}
#back4_5{ display:none;}
#next4_5{ display:none;}

/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/
#photos4 {
	position:absolute;
	top:0;
        width:800px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}


/*各写真の並び位置を設定*/
#photo4_1{ 
		position:relative;
		float:left;
		}
#photo4_2{ 
		position:relative;
		float:left;
		}
#photo4_3{ 
		position:relative;
		float:left;
		}
#photo4_4{ 
		position:relative;
		float:left;
		}
#photo4_5{ 
		position:relative;
		float:left;
		}
/*ボタン領域の設定*/
.cover_left4, .cover_right4 {
	position:absolute;
	top:0;
	width:50px;
	height:240px;
	display:none;
	cursor:pointer;
	z-index:101;
}
.cover_left4 {
	left:0;
}
.cover_right4 {
	left:100px;
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left4 span, .cover_right4 span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 140px;
}
.cover_left4 span {
	left: 10px;	
}
.cover_right4 span {
	left: 100px
}
/*ボタン領域hover時文字の設定*/
.cover_right4:hover > span,.cover_left4:hover > span {
	opacity:1;
	color:#EEE;
}
#right4_1{ display:none; }
#left4_2{ display:none;} 
#right4_2{ display:none; }
#left4_3{ display:none;} 
#right4_3{ display:none; }
#left4_4{ display:none;} 
#right4_4{ display:none; }
#left4_5{ display:none;} 

/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/

#back4_2:checked ~ #photos4 { left:0; }
#back4_3:checked ~ #photos4,#next4_1:checked ~ #photos4 { left:-240px; }
#back4_4:checked ~ #photos4,#next4_2:checked ~ #photos4 { left:-480px; }
#back4_5:checked ~ #photos4,#next4_3:checked ~ #photos4 { left:-720px; }
#next4_4:checked ~ #photos4 { left:-2400px; }

/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/
#back4_2:checked ~ #n_btn4 label #right4_1 { display:block; }
#back4_3:checked ~ #b_btn4 label #left4_2,#back4_3:checked ~ #n_btn4 label #right4_2 { display:block; }
#back4_4:checked ~ #b_btn4 label #left4_3,#back4_4:checked ~ #n_btn4 label #right4_3 { display:block; }
#back4_5:checked ~ #b_btn4 label #left4_4,#back4_5:checked ~ #n_btn4 label #right4_4 { display:block; }
#next4_1:checked ~ #b_btn4 label #left4_2,#next4_1:checked ~ #n_btn4 label #right4_2 { display:block; }
#next4_2:checked ~ #b_btn4 label #left4_3,#next4_2:checked ~ #n_btn4 label #right4_3 { display:block; }
#next4_3:checked ~ #b_btn4 label #left4_4,#next4_3:checked ~ #n_btn4 label #right4_4 { display:block; }
#next4_4:checked ~ #b_btn4 label #left4_5 { display:block; }

```


###発生している問題・エラーメッセージ

```
上記のソースを実行すると、下のスライドショーは動くが、上のスライドショーが実行されない
```

###補足情報(言語/FW/ツール等のバージョンなど)
今回はjs等は使わずにcssのみでスライドショーを実行したいです。

質問編集履歴