我正在尝试编写一个包含表的html页面，当鼠标放在表上时，它应该会折叠到表头。此折叠操作应使用转换/动画完成。
当我有桌子的时候，我不知道如何转换。我在网上找不到任何例子。有人能解释一下吗？
下面是我的代码，但它只创建使用样式表格式化的表：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #F0F0F0}
th {
background-color: #FF3366;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
最佳答案
使用此css
thead:hover+tbody{
display: none;
transition: all 0.5s ease-in;
}
html结构将是
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</tbody>
</table>