HTML + CSS的TreeTable

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

You need to replace table by ul (or ol ) and td by li (remove tr ) in HTML and CSS and it will look like the disered layout on your image.

An other reason to do this is that the content you are displaying is not tabular data, it is a list of files so you shouldn't use tables but list type layout.

FIDDLE

HTML:

<ul class="table-tree" cellspacing="0">
    <li>
        <label for="folder2">Folder 1</label>
        <input type="checkbox" id="folder2" />
        <ul class="table-wrapper">
            <li class="file"><a href="">Subfile 1</a>

            </li>
            <li class="file"><a href="">Subfile 2</a>

            </li>
            <li>
                <label for="folder3">Subfolder 1</label>
                <input type="checkbox" id="folder3" />
                <ul class="table-wrapper">
                    <li class="file"><a href="">Subsubfile 1</a>

                    </li>
                    <li class="file"><a href="">Subsubfile 2</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS:

*, 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;
}
li {
    display: block;
    position: relative;
}
li 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%;
}
li input {
    position: absolute;
    left: 0;
    margin-left: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
li input + ul {
    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;
}
li input:checked + ul {
    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%;
}
li.file {
    margin-left: -1px !important;
}
li input + ul > li {
    display: none;
    margin-left: -14px !important;
    padding-left: 1px;
}
li input:checked + ul > li {
    display: block;
    margin: 0 0 0.125em;
}
li input:checked + ul > li:last-child {
    margin: 0 0 0.063em;
    /* 1px */
}

Answer 2

I hope my example helped you demo

<ol class="tree">
        <li>
            <label for="folder1">Folder 1</label> <input type="checkbox" checked disabled id="folder1" /> 
            <ol>
                <li class="file"><a href="document.html.pdf">File 1</a></li>
                <li>
                    <label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> 
                    <ol>
                        <li class="file"><a href="">Filey 1</a></li>
                        <li>
                            <label for="subsubfolder1">Subfolder 1</label> <input type="checkbox" id="subsubfolder1" /> 
                            <ol>
                                <li class="file"><a href="">File 1</a></li>
                                <li>
                                    <label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" /> 
                                    <ol>
                                        <li class="file"><a href="">Subfile 1</a></li>
                                        <li class="file"><a href="">Subfile 2</a></li>
                                        <li class="file"><a href="">Subfile 3</a></li>
                                        <li class="file"><a href="">Subfile 4</a></li>
                                        <li class="file"><a href="">Subfile 5</a></li>
                                        <li class="file"><a href="">Subfile 6</a></li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="file"><a href="">File 3</a></li>
                        <li class="file"><a href="">File 4</a></li>
                        <li class="file"><a href="">File 5</a></li>
                        <li class="file"><a href="">File 6</a></li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            <label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" /> 
            <ol>
                <li class="file"><a href="">File 1</a></li>
                <li>
                    <label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">Subfile 1</a></li>
                        <li class="file"><a href="">Subfile 2</a></li>
                        <li class="file"><a href="">Subfile 3</a></li>
                        <li class="file"><a href="">Subfile 4</a></li>
                        <li class="file"><a href="">Subfile 5</a></li>
                        <li class="file"><a href="">Subfile 6</a></li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            <label for="folder3">Folder 3</label> <input type="checkbox" id="folder3" /> 
            <ol>
                <li class="file"><a href="">File 1</a></li>
                <li>
                    <label for="subfolder3">Subfolder 1</label> <input type="checkbox" id="subfolder3" /> 
                    <ol>
                        <li class="file"><a href="">Subfile 1</a></li>
                        <li class="file"><a href="">Subfile 2</a></li>
                        <li class="file"><a href="">Subfile 3</a></li>
                        <li class="file"><a href="">Subfile 4</a></li>
                        <li class="file"><a href="">Subfile 5</a></li>
                        <li class="file"><a href="">Subfile 6</a></li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            <label for="folder4">Folder 4</label> <input type="checkbox" id="folder4" /> 
            <ol>
                <li class="file"><a href="">File 1</a></li>
                <li>
                    <label for="subfolder4">Subfolder 1</label> <input type="checkbox" id="subfolder4" /> 
                    <ol>
                        <li class="file"><a href="">Subfile 1</a></li>
                        <li class="file"><a href="">Subfile 2</a></li>
                        <li class="file"><a href="">Subfile 3</a></li>
                        <li class="file"><a href="">Subfile 4</a></li>
                        <li class="file"><a href="">Subfile 5</a></li>
                        <li class="file"><a href="">Subfile 6</a></li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            <label for="folder5">Folder 5</label> <input type="checkbox" id="folder5" /> 
            <ol>
                <li class="file"><a href="">File 1</a></li>
                <li>
                    <label for="subfolder5">Subfolder 1</label> <input type="checkbox" id="subfolder5" /> 
                    <ol>
                        <li class="file"><a href="">Subfile 1</a></li>
                        <li class="file"><a href="">Subfile 2</a></li>
                        <li class="file"><a href="">Subfile 3</a></li>
                        <li class="file"><a href="">Subfile 4</a></li>
                        <li class="file"><a href="">Subfile 5</a></li>
                        <li class="file"><a href="">Subfile 6</a></li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>

Answer 3

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.