表體CSS轉換

我想爲表體轉換時，我將鼠標懸停在它上面，使它消失，表中唯一剩下的就是表頭。我是轉型新手，所以也許我做錯了。我期望的是桌子的身體慢慢地上升到0px，但事實並非如此。另外我只需要使用CSS。你可以幫我嗎？謝謝。表體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>

來源

2015-11-10 Cristi Lungu

我假設你想創建一個手風琴就像效果一樣，對嗎？ *我期望的是表頭緩慢上升，直到0px *也許它應該是表體而不是頭部？ –

是：D。表頭遺漏了標題抱歉 –

我嘗試不同的東西，我申請一個div表格數據TD和它的工作原理：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>

來源

2015-11-10 10:19:04

回答

相關問題