11548 sujets

JavaScript, DOM et API Web HTML5

[DHTML] Cacher une colonne d'un tableau HTML

Bonjour à tous,

je voudrais savoir si des personnes avaient déjà cherché un moyen de "cacher" une colonne d'un tableau HTML (du moins "collapser" afin d'offrir à l'utilisateur la possibilité de ne voir que certaines colonnes)?
Dans ce paragraphe, l'auteur pécise que l'on peut utiliser la propriétés 'visibility' des balises COL et COLGROUP afin de cacher des colonnes...
a écrit :
Quand la propriété 'visibility' d'une colonne a la valeur 'collapse', aucunes des cellules de la colonne n'est rendue et celles des cellules qui déborderaient dans d'autres colonnes sont rognées. De plus, la largeur de la table est diminuée de celle de la colonne qui aurait autrement été affichée.

Je cherche à réaliser cet effet... Pensez-vous que je suis sur la bonne voie?
Modifié par starkeus (31 Oct 2005 - 13:34)
Apparemment la valeur collapse de la propriété visibility n'est quasiment pas supportée (ou mal) par les browser actuels...
Alors j'ai essayé avec le bon vieux hidden mais j'ai un soucis sous FF, j'applique le style hidden à ma balise COL. Sous IE, les données assosiée à cette colonne ne sont plus visibles...sous FF elles le sont encore?
Pourriez-vous m'aider à comprendre pourquoi?

Voici le code:

<html>
  <head>
    <title>Test CSS</title>
	<script>
function affiche(baliseId) 
  {
  if (document.getElementById && document.getElementById(baliseId) != null) 
    {
    document.getElementById(baliseId).style.visibility='visible';
	/*document.getElementById(baliseId).style.display='block';*/
	document.getElementById(baliseId).width='200';
    }
  }
function cache(baliseId) 
{

  if (document.getElementById && document.getElementById(baliseId) != null) 
    {
    /*document.getElementById(baliseId).style.visibility='collapse';*/
	/*document.getElementById(baliseId).style.display='none';*/
	document.getElementById(baliseId).style.visibility='hidden';
	document.getElementById(baliseId).width='5';
	}
}
</script>
  </head>
  <body>
 <table border="1" width="600">
     <colgroup>
        <col id="col1" width="200">
        <col id="col2" width="200">
        <col id="col3" width="200">
     </colgroup>
	 <thead>
    <tr>
      <th><input type="button" title="Replier" onClick="cache('col1');" value="<<<"></input><input title="Afficher" type="button" onClick="affiche('col1');" value=">>>"></input></th>
      <th><input type="button" title="Replier" onClick="cache('col2');" value="<<<"></input><input title="Afficher" type="button" onClick="affiche('col2');" value=">>>"></input></th>
      <th><input type="button" title="Replier" onClick="cache('col3');" value="<<<"></input><input title="Afficher" type="button" onClick="affiche('col3');" value=">>>"></input></th>
    </tr>
    </thead>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
	<tr>
	  <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
	<tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
</table>
</body>
</html>
Bonjour,
IE est anormalement tolérant, mais il faut toujours préciser l'unité de mesure :
document.getElementById(baliseId).width=200+'[b]px[/b]';
Sujet clos
Aller à