3
我想寫一個包含一個表的HTML頁面,當鼠標放在表上時,它應該摺疊到表頭。這個崩潰操作應該使用過渡/動畫來完成。CSS轉換表
我不知道在有表格時如何進行轉換。我在網上找不到任何示例。有人可以解釋嗎?
下面是我的代碼,但它僅創建使用樣式表格式化的表格:
<!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>
使用THEAD和TBODY,然後嘗試應用對MAX-height屬性的TBODY的轉變(從0到一個非常高的值) – fcalderan
當鼠標在桌子上方時,你想*摺疊*試圖對用例進行可視化,感覺這對於用戶來說會非常惱人,但更重要的是,如果你摺疊桌子,大概鼠標不再會被覆蓋 - 那麼會發生什麼?表再次膨脹,然後鼠標再次結束,所以它又崩潰了?或者我誤解了? – CupawnTae
*真的很高的價值*可能是一個「相當高的價值」會更好地工作,否則一些很大比例的過渡時間將花費從真正的高價值到實際的高度,並且只剩下剩餘的時間從零到實際高度的下降或到零的高度 –