JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="tbl">
<li class="tr + thead">
<div>Фамилия</div> <div>Проект</div> <div>Задача</div> <div>План</div> <div>Факт</div>
</li>
<input type="checkbox" id="chk1">
<li class="tr">
<div><label for="chk1">Иванов</label> </div> <div> </div><div> </div><div> </div><div> </div>
</li>
<ul class="tbody">
<input type="checkbox" id="chk2">
<li class="tr">
<div> </div> <div><label for="chk2">Проект 1</label></div> <div> </div> <div> </div> <div> </div>
</li>
<ul class="tbody">
<li class="tr"> <div> </div> <div> </div> <div>Задача 1</div> <div>10</div> <div>11</div> </li>
<li class="tr"> <div> </div> <div> </div> <div>Задача 2</div> <div>20</div> <div>21</div> </li>
</ul>
</ul>
</ul> <!-- class="tbl" -->
CSS
li, ul{
list-style:none;
margin:0; padding:0;
overflow:hidden;
}
.tbl {
display:table;
border-left:1px solid gray;
border-top:1px solid gray;
}
.tr {
display:table-row;
}
.tr > div {
display:table-cell;
border:1px solid gray;
border-left:0;
border-top:0;
padding:2px 5px;
}
.thead {
display:table-header-group;
background-color:#ccc;
}
.tbody {
display:table-row-group;
}
input{
display:none;
}
input + li div label {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 4px;
}
input:checked + li div label {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 4px;
}
label {
cursor:pointer;
padding-left:16px;
}
input ~ .tbody {
display:none;
}
input:checked ~ .tbody {
display:table-row-group;
}