When the checkbox is inactive the table doesn't change, once the checkbox is clicked all the cells background color becomes yellow except for the middle one that becomes red. That's the result I need to reach
label {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
display: inline-block;
cursor: pointer;
margin:5px;
}
#checkbox_id:checked + table {
background-color: yellow;
}
/*Table styles*/
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal; width: 50px; height: 50px;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal; width: 50px; height: 50px;}
.tg .tg-0lax{text-align:left;vertical-align:top}<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8">
<title>Check6</title>
</head>
<body>
<label for="checkbox_id">CLICCA</label>
<input type="checkbox" id="checkbox_id">
<table class="tg">
<thead>
<tr>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax"></td>
<td id="red"></td>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
</tr>
</tbody>
</table>
</body>
</html>Thanks already for the help.
Aucun commentaire:
Enregistrer un commentaire