Your CSS has two errors.
First, you should select unchecked checkbox like this:
input:not(:checked)
and not relying on a fallback in rules application.
Second and more important, the rule td input:checked + table > tbody td
is wrong.
Infact, if you have your outer checkbox checked but the nested one unchecked, that rule will still match nested table td because the first part td input:checked + table > tbody
matches the outer table body and then the second part td
looks for td that have that body as ancestor.
You should check for direct children instead.
Summing up, you can change your css to something like this:
*, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body, form, ul, li, p, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #fafafa;
color: rgba(0, 0, 0, 0.7);
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/**
* Tree Table CSS
**/
.table-tree {
display: block;
padding: 30px 0 0 30px;
}
td {
display: block;
position: relative;
}
td label {
background: url(http://www.webmasters.by/images/articles/css-tree/folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
width: 100%;
}
td input {
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
// CHANGED HERE
td input:not(:checked) + table {
background: url(http://www.webmasters.by/images/articles/css-tree/toggle-small-expand.png) -3px -1px no-repeat;
margin: -0.938em 0 0 0;
height: 1em;
width: 1em;
}
td input:checked + table {
background: url(http://www.webmasters.by/images/articles/css-tree/toggle-small.png) 41px 4px no-repeat;
display: block;
margin: -1.25em 0 0 -44px;
padding: 1.25em 0 0 80px;
height: auto;
width: 100%;
}
td.file {
margin-left: -1px !important;
}
// CHANGED HERE
td input:not(:checked) + table > tbody > tr > td {
display: none;
margin-left: -14px !important;
padding-left: 1px;
}
// CHANGED HERE
td input:checked + table > tbody > tr > td {
display: block;
margin: 0 0 0.125em;
}
// CHANGED HERE
td input:checked + table > tbody > tr > td:last-child {
margin: 0 0 0.063em; /* 1px */
}
Always use the most specific CSS rule you can because when HTML gets huge you can have some surprises.