我想在这个表可折叠行的/可扩展

在这里找到的代码，不想粘贴整个事情... https://code.sololearn.com/W8odKz78WT07/#html 我想在这个表可折叠行的/可扩展

或者作为一个例子，让我们用这个

<head> 

</head> 

<body> 
    <table> 
     <tr> 
      <th></th> 
      <th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th> 
      <th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th> 
      <th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th> 
      <th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th> 
      <th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th> 
     </tr> 

     <tr> 
      <th> <p class="comparisons">Operating Systems</p> 
       <td class="center">Web</td> 
       <td class="center">Web</td> 
       <td class="center">Web</td> 
       <td class="center">Web</td> 
       <td class="center">Web</td> 
      </th> 

     </tr> 
      <th><p class="comparisons">Mobile compatibility</p> 
       <td><img style="padding-left:20px" title="iOS and Android" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td> 
       <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td> 
       <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td> 
       <td><img style="padding-left:20px" title="iOS and Android" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td> 
       <td><img style="padding-left:60px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td> 
      </th> 
     </tr>

CSS被应用：

.isaaccrm { 
    float: left; 
    height: 20px; 
    width: 100px; 
} 

.zoho { 
    height: 50px; 
    width: 115px; 
    padding-top: 10px; 
    float: right; 
    margin-right: 30px; 

} 

.salesforce { 
    height: 60px; 
    width: 90px; 
    padding-top: 10px; 
    padding-left: 20px; 
} 

.infusionsoft { 
    height: 25px; 
    width: 180px; 
    padding-top: 5px; 
} 

.sugarcrm { 
    height: 60px; 
    width: 90px; 
    padding-top: 10px; 
    margin-right: 55px; 
    float: right; 
} 

.comparisons { 

    margin-top: 30px; 
    margin-bottom: 30px; 
    /* Make the comparison font into Lato*/ 

}

是疗法e我可以通过任何方式使这些行可折叠，同时显示行的名称（<p>标记，因此简单地折叠所有<td>），而只使用HTML/CSS？或者我必须包含JavaScript？

来源

2017-04-27 SoJammy

也许这可以帮助你。 http://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery –

@BhavyaSinha - 确保你做*所有必要的编辑，而不仅仅是一些。 –

您可以input:checked，类似这样Collapse and expand elements with CSS

你必须将所有input标签放在你的桌子前，然后将label标签如实现这一目标每行第一个单元格内部。您需要input和label标签上的id/for属性。

来源

2017-04-27 11:55:46

我想在这个表可折叠行的/可扩展

回答

相关问题