Comment utiliser les détails et la balise de résumé de Html5 pour masquer et développer une ligne entière dans un tableau?

Je voudrais utiliser la balise de détails pour cacher et développer toute une ligne dans une table, donc je actuellement le codeComment utiliser les détails et la balise de résumé de Html5 pour masquer et développer une ligne entière dans un tableau?

  <table border="1"> 
       <tr> 
        <td>Header 1 </td> 
        <td>Header 2 </td> 
        <td>Header 3 </td> 
       </tr> 

       <tr> 
        <td>Content 1 </td> 
        <td>Content 2 </td> 
        <td>Content 3 </td> 
       </tr> 

       <details> 
        <tr> 
         <td>Hidden Content 1 </td> 
         <td>Hidden Content 2 </td> 
         <td>Hidden Content 3 </td> 
        </tr> 
       </details> 
      </table>

Lors de l'extension de la balise détails, il produit le « caché » rangée mais dans un colonne au lieu des 3 colonnes entières dans la table d'origine. J'ai aussi essayé de mettre l'étiquette à l'intérieur de la ligne, mais je viens en face de la même question

    <tr><details> 
         <td>Hidden Content 1 </td> 
         <td>Hidden Content 2 </td> 
         <td>Hidden Content 3 </td> 
         </details> 
        </tr>

Quelqu'un at-il aussi venir accross ce problème et a réussi à le résoudre?

Source

2017-07-28 S.Hill

Vous ** ** doit préserver la structure de la table de base. Seulement '' dans '', '' , '' ou ''

et que '' . Il n'y a pas d'autre chemin. Vous devez probablement envelopper une nouvelle table dans l'élément '

' ou vous devez le faire avec JavaScript. – Xufox

Répondre

Placez le contenu que vous souhaitez cacher dans une nouvelle table et envelopper l'étiquette details autour de cette:

table { 
 
    width: 300px; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td>Header 1 </td> 
 
    <td>Header 2 </td> 
 
    <td>Header 3 </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Content 1 </td> 
 
    <td>Content 2 </td> 
 
    <td>Content 3 </td> 
 
    </tr> 
 
</table> 
 
<details> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>Hidden Content 1 </td> 
 
     <td>Hidden Content 2 </td> 
 
     <td>Hidden Content 3 </td> 
 
    </tr> 
 
    </table> 
 
</details>

Source

2017-07-28 15:01:23 sol

Ceci est actuellement le meilleur que je l'ai eu. Il crée une table distincte au lieu de simplement ajouter une ligne directement sous le contenu 1,2 et 3. –

ou ''	dans ''

Comment utiliser les détails et la balise de résumé de Html5 pour masquer et développer une ligne entière dans un tableau?

Répondre

Questions connexes