2016-03-14 68 views
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> 
+1

使用THEAD和TBODY,然後嘗試應用對MAX-height屬性的TBODY的轉變(從0到一個非常高的值) – fcalderan

+0

當鼠標在桌子上方時,你想*摺疊*試圖對用例進行可視化,感覺這對於用戶來說會非常惱人,但更重要的是,如果你摺疊桌子,大概鼠標不再會被覆蓋 - 那麼會發生什麼?表再次膨脹,然後鼠標再次結束,所以它又崩潰了?或者我誤解了? – CupawnTae

+1

*真的很高的價值*可能是一個「相當高的價值」會更好地工作,否則一些很大比例的過渡時間將花費從真正的高價值到實際的高度,並且只剩下剩餘的時間從零到實際高度的下降或到零的高度 –

回答

1

使用此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> 
1

您可以將此axample:EXAMPLE

在這種情況下,一般使用transision財產。