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

回答

相关问题