Switch výsledků v2b (celá tabulka)

by Petr Haluza

HTML

Celá tabulka
<section id="PoweRR">    
Zvol stroj: 
<input id="tab1" type="radio" name="stroje" checked="" />  <label class="stroj" for="tab1">MCR BASIC</label>   
<input id="tab2" type="radio" name="stroje" />  <label class="stroj" for="tab2">MCR PRO</label>   
<input id="tab3" type="radio" name="stroje" />  <label class="stroj" for="tab3">MCR ELITE</label>  
<br />
Zvol rozlišení: 
<input id="tab11" type="radio" name="rozliseni" checked="" />  <label for="tab11">FullHD</label>   
<input id="tab12" type="radio" name="rozliseni" />  <label for="tab12">QHD</label>   
<input id="tab13" type="radio" name="rozliseni" />  <label for="tab13">4K</label>

<div id="Stroj1">
<table>
    <tbody>
        <tr>
            <!-- OVERWATCH -->
            <td class="gameLogo"><img src="http://www.hal3000.cz/_pub/images/testy/overwatch.png" alt="" /><a>v1.123</a></td>
            <td>
              <div class="nadpisDetaily">Nízké detaily</div>
              <div class="FPSblok">
                <span class="FPS FPSvR1" data-fps="90"><small>fps</small></span>      
                <span class="FPS FPSvR2">r2-s1<small>fps</small></span>       
                <span class="FPS FPSvR3">r3-s1<small>fps</small></span>
              </div>
            </td>
            <td>
              <div class="nadpisDetaily">Střední detaily</div>
              <div class="FPSblok">
                <span class="FPS FPSvR1" data-fps="49"><small>fps</small></span>       
                <span class="FPS FPSvR2">r2-s1<small>fps</small></span>       
                <span class="FPS FPSvR3">r3-s1<small>fps</small></span>
              </div>
            </td>
            <td>
              <div class="nadpisDetaily">Vysoké detaily</div>
              <div class="FPSblok">
                <span class="FPS FPSvR1" data-fps="22"><small>fps</small></span>       
                <span class="FPS FPSvR2">r2-s1<small>fps</small></span>       
                <span class="FPS...

CSS

body {background:#222; color:#eee;}

#PoweRR {text-align:center;width: calc(100% - 30px);
border: 2px solid #ea0000;border-radius: 15px;}
#PoweRR .gameLogo img {padding:15px 5px; }
#PoweRR .gameLogo {position:relative;}
#PoweRR .gameLogo a {position:absolute; font-size:8px; bottom:3px; left:3px; z-index:+1; color:#aaa; }
#PoweRR table {margin:0 auto;}
#PoweRR table tr td { min-width: 80px; border-bottom: 1px solid red; }
#PoweRR table tr:last-child td { border-bottom: none;}
input { display: none;}
label { display: inline-block; padding:10px 15px; margin: 0 2px 5px; background:#444;}
label.stroj {border-radius: 0 0 10px 10px;}

label:hover {  color: #789;  cursor: pointer;}
input:checked + label {  background: #ea0000;}

.nadpisDetaily { text-align:center; font-size:9px; padding: 3px; margin-top: -20px;}
.FPSblok { background:#333; padding:3px 2px;}
.FPS { text-align:center; display:block; font-size:18px;}
.FPS small { font-size:12px; padding-left:3px;}
.FPS:before { content:attr(data-fps);}
[data-fps="49"] {color:#f99;} 
[data-fps="22"] {color:#f22;}

/*skrýt vše*/
.FPS,
#Stroj1,#Stroj2,#Stroj3 {display:none;}

/*odkrýt jen čeknutý*/
#tab11:checked ~ div table .FPSvR1,
#tab12:checked ~ div table .FPSvR2,
#tab13:checked ~ div table .FPSvR3 { display:block;}

#tab1:checked ~ #Stroj1,
#tab2:checked ~ #Stroj2,
#tab3:checked ~ #Stroj3 {display:block;}