堆棧內存溢出
  簡體   English   中英

HTML + CSS的TreeTable

[英]TreeTable by HTML+CSS

 原文  2014-05-13 09:41:22  6   3    html/ css/ treetable

問題描述

偶然發現了TreeTable的問題...幫助理解，當選中較高的td輸入時，將不會出現如何使第二層及更下層的內容出現。 不幸的是，我只能使用HTML + CSS。 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>

如果布局是這樣，那就太好了

在此處輸入圖片說明

有人可以幫我嗎？

3 個解決方案

解決方案1
 1  2014-05-13 10:01:14

您需要在HTML和CSS中用ul （或ol ）替換table ，並用li （刪除tr ）替換td ，這看起來像是圖像上的扭曲布局。

這樣做的另一個原因是，您顯示的內容不是表格數據，而是文件列表，因此您不應使用表，而應使用列表類型布局。

小提琴

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

解決方案2
 0  2014-05-13 10:09:41

我希望我的例子可以幫助您演示 

<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>

解決方案3
 0 已采納  2014-05-13 10:16:30

您的CSS有兩個錯誤。

首先，您應該選中未選中的復選框，如下所示： 

input:not(:checked)

並且不依賴於規則應用中的后備廣告。

其次，更重要的是，規則td input:checked + table > tbody td是錯誤的。

實際上，如果您選中了外部復選框，但未選中嵌套復選框，則該規則仍將與嵌套表td匹配，因為第一部分td input:checked + table > tbody與外部表主體匹配，然后第二部分td查找td以那個身體為祖先 。

您應該改為檢查直系子女。

總結一下，您可以將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;
}

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

始終使用最具體的CSS規則，因為當HTML變得龐大時，您可能會感到意外。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML + CSS畫廊 HTML + CSS-全屏html HTML + CSS到RTF（在PHP中）？ 如何抓取html + css 子菜單HTML + CSS的子菜單 將 svg 轉換為 html+css 表格邊框HTML + CSS HTML + css下拉居中 框中的HTML + CSS文本 導航欄HTML + CSS
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM