Je veux faire les lignes dans cette table pliante/extensible

Trouver le code ici, ne veulent pas coller la chose entière ... https://code.sololearn.com/W8odKz78WT07/#html Je veux faire les lignes dans cette table pliante/extensible

Ou comme un exemple, permet d'utiliser cette

<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 appliquée:

.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*/ 

}

est-ther De quelque façon que je peux rendre ces lignes pliables, tout en montrant le nom de la ligne (la balise <p>, donc tout simplement réduire tous les <td>), tout en utilisant uniquement HTML/CSS? Ou dois-je inclure JavaScript?

Source

2017-04-27 SoJammy

peut-être que cela vous aide. http://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery –

@BhavyaSinha - Assurez-vous de faire * toutes * les modifications nécessaires, pas seulement certaines. –

Vous pouvez avec cette input:checked achive, semblable à ce Collapse and expand elements with CSS

Vous devez placer toutes les balises input avant votre table, puis placez label étiquettes par exemple à l'intérieur de chaque première cellule de chaque rangée. vous aurez besoin des attributs id/for sur les étiquettes input et label.

Source

2017-04-27 11:55:46

Je veux faire les lignes dans cette table pliante/extensible

Répondre

Questions connexes