<style> table{ border:1px solid black; border-collapse:collapse; width:100%; } td,th{ border:1px solid black; } table { padding: 50px; } td { text-align: center; width:calc(100% / 8); height: 60px; } input[type="radio"] { display: none; } input[type="radio"]:checked + .box { background-color: #6ACD81; } .box { height:100%; width:100%; background: #EFF0F1; transition: all 250ms ease; text-align: center; cursor: pointer; font-weight: 300; } </style> <link rel="stylesheet" href="/css_webseite/all.min.css"> <script src="/js_webseite/jquery.js"></script> <h3>Klicke auf die Felder</h3> <table><tr><th></th><th>Quelle1</th> <th>Quelle2</th> <th>Quelle3</th> <th>Quelle4</th> <th>Quelle5</th> <th>Quelle6</th> <th>Quelle7</th></tr> <tr> <td>Platz 1</td> <td><label><input type="radio" class="time_1" name="ws_1" value="WS1 @ Time1" checked><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_2" value="WS2 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_3" value="WS3 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_4" value="WS4 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_5" value="WS5 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_6" value="WS6 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_1" name="ws_7" value="WS7 @ Time1"><div class="front-end box"><span>Text</span></div></label></td> </tr> <tr> <td>Platz 2</td> <td><label><input type="radio" class="time_2" name="ws_1" value="WS1 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_2" value="WS2 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_3" value="WS3 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_4" value="WS4 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_5" value="WS5 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_6" value="WS6 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_2" name="ws_7" value="WS7 @ Time2"><div class="front-end box"><span>Text</span></div></label></td> </tr> <tr> <td>Platz 3</td> <td><label><input type="radio" class="time_3" name="ws_1" value="WS1 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_2" value="WS2 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_3" value="WS3 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_4" value="WS4 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_5" value="WS5 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_6" value="WS6 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_3" name="ws_7" value="WS7 @ Time3"><div class="front-end box"><span>Text</span></div></label></td> </tr> <tr> <td>Platz 4</td> <td><label><input type="radio" class="time_4" name="ws_1" value="WS1 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_2" value="WS2 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_3" value="WS3 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_4" value="WS4 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_5" value="WS5 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_6" value="WS6 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_4" name="ws_7" value="WS7 @ Time4"><div class="front-end box"><span>Text</span></div></label></td> </tr> <tr> <td>Platz 5</td> <td><label><input type="radio" class="time_5" name="ws_1" value="WS1 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_2" value="WS2 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_3" value="WS3 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_4" value="WS4 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_5" value="WS5 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_6" value="WS6 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> <td><label><input type="radio" class="time_5" name="ws_7" value="WS7 @ Time5"><div class="front-end box"><span>Text</span></div></label></td> </tr> </table> <script> $("input").click(function(){ $("input."+this.className).not($(this)).each(function(){ this.checked = false; }); }); </script>