Всем Добрый вечер! Прошу помощи с вёрсткой. Хочу сделать древовидную таблицу, (данные могут меняться) но у меня постоянно слезает стиль в право. Имею такой вариант https://jsfiddle.net/nafanya123/L9txe6bq/
<body>
<button onclick="SwapAll(false);">Свернуть всё</button>   <button onclick="SwapAll(true);">Развернуть всё</button>
<br><br>
<table id="MyTable">
<tr>
<th>Name</th>
<th>sum1</th>
<th>sum2</th>
<th>sum3</th>
</tr>
<tr>
<td>
<label>
<input type="checkbox">
<a onclick="sh(this)">Item1</a>
</label>
</td>
<td>313</td>
<td>5</td>
<td>318</td>
</tr>
<tr>
<td colspan=5 class="node">
<input type="checkbox">
<table>
<tr>
<td>
<label>
<input type="checkbox">
<a onclick="sh(this)">Item2</a>
</label>
</td>
<td>313</td>
<td>5</td>
<td>318</td>
</tr>
</table>
<table>
<tr>
<td>
<label>
<input type="checkbox">
<a onclick="sh(this)">Item3</a>
</label>
</td>
<td>313</td>
<td>5</td>
<td>318</td>
</tr>
<tr>
<td colspan=5 class="node">
<input type="checkbox">
<table>
<tr>
<td>
<label>
<input type="checkbox">
<a onclick="sh(this)">Item4</a>
</label>
</td>
<td></td>
<td></td>
<td>10</td>
</tr>
<tr>
<td colspan=5 class="node">
<input type="checkbox">
<table>
<tr>
<td>
<label>
<input type="checkbox">
<a onclick="sh(this)">Item5</a>
</label>
</td>
<td></td>
<td></td>
<td>10</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
test
</td>
<td>313</td>
<td>5</td>
<td>318</td>
</tr>
</table>
table {
border-collapse:collapse;
table-layout:fixed;
width:800px;
}
td, th {
border:1px solid gray;
border-top:0;
padding:2px 5px;
width:300px;
}
th {
background:#ccc;
border-top:1px solid gray;
}
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;
}
input:checked ~ table{
margin-left: 15px;
}
.node {
padding:0;
border-bottom:0;
}
td+td+td+td {
text-align:right;
}
function sh(el) {
var row = el.parentNode.parentNode.parentNode;
var nextRow = row.parentNode.rows[row.rowIndex + 1];
var chk = nextRow.querySelector('td > input');
chk.checked = !chk.checked;
}
function SwapAll(b) {
var tbl = document.getElementById('MyTable');
var chks = tbl.getElementsByTagName('input');
for (var i=0; i<chks.length; i++) {
chks[i].checked = b;
}
}