CSS轉換表

我想寫一個包含一個表的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>

來源

2016-03-14 DianaM

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

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

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

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

來源

2016-03-14 14:00:24

您可以將此axample：EXAMPLE

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

來源

2016-03-14 13:57:11

回答

相關問題