TreeTable by HTML+CSS

Question

Stumbled upon a problem with TreeTable... Help to understand, how to make the second level and further down will not appear when the upper td input is checked. Unfortunately I can use only HTML+CSS. how it looks like now on jsfiddle

<table class="table-tree" cellspacing="0">
        <tr>
            <td>
                <label for="folder2">Folder 1</label>
                <input type="checkbox" id="folder2" />
                <table class="table-wrapper">
                    <tr>
                        <td class="file"><a href="">Subfile 1</a></td>
                        <td class="file"><a href="">Subfile 2</a></td>
                        <td>
                            <label for="folder3">Subfolder 1</label>
                            <input type="checkbox" id="folder3" />
                            <table class="table-wrapper">
                                <tr>
                                    <td class="file"><a href="">Subsubfile 1</a></td>
                                    <td class="file"><a href="">Subsubfile 2</a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

It would be great if layout was like this

Can anyone help me, please?

Answer 1

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.