treeTable by CSS

by ken tsai

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 */
}