TreeTable by HTML + CSS
偶然发现TreeTable有问题......
有助于理解，当检查上部td输入时，如何使第二级和更低级别不会出现。不幸的是我只能使用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>
如果布局像这样，那就太棒了
有人可以帮助我吗？
3 个答案:
答案 0 :(得分：1)
您需要在中table（或ul）和ol替换td li（删除tr） HTML 和 CSS ，它看起来就像图像上的病态布局。
执行此操作的另一个原因是您显示的内容不是表格数据，而是文件列表，因此您不应使用表格而是列表类型布局。
<强> 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 */
}
答案 1 :(得分：0)
我希望我的例子帮助你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>
答案 2 :(得分：0)
你的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变得庞大时，您可能会有一些惊喜。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？