当我将鼠标悬停在表体上时，我正试图对其进行转换，使其消失，而表中只剩下表头。我是一个新手，所以也许我做错了。我所期望的是桌体慢慢上升到0px，但事实并非如此。此外，我只需要使用CSS。你能帮我吗？谢谢
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
}
tr {
background: #FFFF66;
}
tbody {
color: blue;
transition: max-height 2s;
}
tbody:hover {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
</td>
</tr>
<tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
</td>
</tr>
<tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
</td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
</td>
</tr>
<tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
</td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
</td>
</tr>
<tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
</td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>我尝试了一些不同的方法，并为表数据td应用了一个div，它可以工作：D
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
border-collapse: collapse;
}
tr {
background: #FFFF66;
}
td {
border: 1px solid red;
}
div {
transition: max-height 1.5s ease;
overflow: hidden;
max-height: 50px;
}
table:hover div {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</div>
</td>
<td>
<div>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
<div>
</td>
</tr>
<tr>
<td>
<div>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</div>
</td>
<td>
<div>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
<div>
</td>
</tr>
<tr>
<td>
<div>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
<div>
</td>
<td>
<div>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
<div>
</td>
</tr>
<tr>
<td>
<div>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
<div>
</td>
<td>
<div>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
<div>
</td>
</tr>
<tr>
<td>
<div>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
<div>
</td>
<td>
<div>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
<div>
</td>
</tr>
</tbody>
</table>
</body>
</html>