css 收展型表格单页html
时间: 2023-08-11 10:28:27 浏览: 45
以下是一个完整的 HTML 页面代码,展示了如何使用 CSS 实现一个收展型表格:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可收展型表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr td:nth-child(n+5) {
display: none;
}
tr.expanded td:nth-child(n+5) {
display: table-cell;
}
</style>
<script>
function toggleRow(row) {
row.classList.toggle("expanded");
}
</script>
</head>
<body>
<table>
<tr>
<th onclick="toggleRow(this.parentNode.nextElementSibling)">姓名</th>
<th>年龄</th>
<th>城市</th>
<th>国家</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">小明</td>
<td>20</td>
<td>北京</td>
<td>中国</td>
<td>1234567890</td>
<td>xiaoming@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>0987654321</td>
<td>xiaoming@gmail.com</td>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">John</td>
<td>30</td>
<td>New York</td>
<td>美国</td>
<td>555-1234</td>
<td>john@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>555-5678</td>
<td>john@gmail.com</td>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">Maria</td>
<td>25</td>
<td>巴黎</td>
<td>法国</td>
<td>01-23-45-67-89</td>
<td>maria@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>06-78-90-12-34</td>
<td>maria@gmail.com</td>
</tr>
</table>
</body>
</html>
```
在这个页面中,我们使用了一个表格来展示人员信息,其中包含了姓名、年龄、城市、国家、电话和邮箱等信息。默认情况下,每行只显示前四个单元格,后面的单元格被隐藏。当用户点击姓名单元格时,我们使用 JavaScript 将该行的类名从 `collapsed` 切换为 `expanded`,这样后面的单元格就会被显示出来。
这个页面中的 CSS 和 JavaScript 代码与之前提供的代码相同,并且包含了一些额外的样式和交互。需要注意的是,这个页面只是一个示例,实际应用中可能需要更复杂的逻辑和样式。