制作具有折叠功能的表格和树形结构可以使用CSS中的伪类和伪元素来实现。具体步骤如下：
:hover伪类来控制表格的展开和折叠。content属性和伪元素::before和::after来添加折叠图标。下面是一个示例代码：
<h3>折叠表格</h3>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
/* 设置折叠图标 */
tr td:first-child::before {
content: "\25B6";
margin-right: 6px;
}
/* 隐藏子行 */
tr:not(:first-child) {
display: none;
}
/* 鼠标悬停时展开子行 */
tr:hover + tr {
display: table-row;
}
</style>使用上述代码可以制作出一个具有折叠功能的表格，鼠标悬停在第一行时，会展开出第二行的内容。
:before伪元素来添加树形图标。content属性来设置图标的内容。下面是一个示例代码：
<h3>树形结构</h3>
<ul>
<li>节点1
<ul>
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
<li>节点2
<ul>
<li>子节点3</li>
<li>子节点4</li>
</ul>
</li>
</ul>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0 0 0 20px;
position: relative;
}
/* 添加树形图标 */
li::before {
content: "\25B6";
position: absolute;
left: 0;
}
/* 设置展开状态的图标 */
li.expanded::before {
content: "\25BC";
}
/* 隐藏子节点 */
ul ul {
display: none;
}
/* 鼠标悬停时展开子节点 */
li:hover > ul {
display: block;
}
/* 点击节点时切换展开状态 */
li:before {
cursor: pointer;
}
li.expanded > ul {
display: block;
}
li.expanded::before {
content: "\25BC";
}
</style>使用上述代码可以制作出一个简单的树形结构，鼠标悬停在节点上时，会展开出子节点的内容。点击节点时，可以切换节点的展开状态。