JSFiddle - React, Tailwind, and code Playground
by Radiocity
HTML
<table>
<tr><th>Фамилия</th> <th>Проект</th> <th>Задача</th> <th>План</th> <th>Факт</th></tr>
<tr> <td> <label><input type="checkbox" name="a1"><a onclick="sh('chk1')">Иванов</a></label> </td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr><td colspan=5 class="node">
<input type="checkbox" id="chk1">
<table>
<tr> <td></td> <td> <label><input type="checkbox" name="a1"><a onclick="sh('chk2')">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr><td colspan=5 class="node">
<input type="checkbox" id="chk2">
<table>
<tr> <td></td> <td></td> <td>Задача 1</td> <td>10</td> <td>11</td> </tr>
<tr> <td></td> <td></td> <td>Задача 2</td> <td>20</td> <td>21</td> </tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
CSS
table {
border-collapse:collapse;
table-layout:fixed;
width:560px;
}
td, th {
border:1px solid gray;
padding:2px 5px;
width:100px;
}
th {background:#ccc;}
input{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 4px;
}
input:checked + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 4px;
}
label a {
cursor:pointer;
padding-left:16px;
}
input ~ table {
display:none;
}
input:checked ~ table {
display:table;
margin-top:-1px;
margin-left:-1px;
}
.node {
padding:0;
border-bottom:0;
}
td+td+td+td {text-align:right;}
JavaScript
function sh(idx) {
document.getElementById(idx).checked = !document.getElementById(idx).checked;
}