Utilisez un navigateur moderne qui respecte votre vie privée : Téléchargez Firefox

[HTML/CSS] tableau avec rendu type figer les volets

Tous les benchmarks, vos résultats, vos tests.
Vos programmes, vos conseils logiciel
Votre matos, vos problèmes
Répondre
Avatar du membre
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 22222
Enregistré le : septembre 27, 2002, 9:41 pm

[HTML/CSS] tableau avec rendu type figer les volets

Message par Aurelienazerty »

Je souhaite faire un tableau en HTML dont la partie gauche contenant les libellé reste fixe, et que les donnée soient découlante à l'image de ce qui se fait avec Excel (figer les volets) :

Code : Tout sélectionner

+-------------------------------------------+
+ Libellé + Val1 + Val2 + Val3 + Val4 + ....+
+-------------------------------------------+
+ titi    +   1  +    2 +    3 +    4 + ....+
+-------------------------------------------+
+ toto    + erre + fdgg + fgg  + fsdf + ....+
+-------------------------------------------+
Les "..." étant la suite des valeurs accessibles via une scroolbar.

Dans ma page HTML, il peut y avoir plusieurs tableaux de ce type, et pour chacun, j'aimerais qu'il prenne 100% de l'espace de son conteneur père.
Il faut que ça passe sous IE 6&7 et Firefox.

Merci de votre aide.
marm
Newbie
Réactions :
Messages : 24
Enregistré le : juillet 17, 2007, 3:20 pm

Message par marm »

Code : Tout sélectionner

<html>
   
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>one</title>
    <style type='text/css'>
    td.headcol {width:auto;}
   
    </style>
   </head>
  
   <body>
   <div style="width:100%;overflow:auto;">
   <table border="1" style="width:100%;overflow:hidden;">
   <tr colspan=5>
       <td class='headcol' id='col1'>one</td>
       <td class='headcol' id='col2'>two</td>
       <td class='headcol' id='col3'>three</td>
       <td class='headcol' id='col4'>four</td>
      <td style="width:10px;"></td>
   </tr>
   </table>
   <div>
   <div style="width:100%;height:200px;overflow-Y:auto;">
   <table border="1" style="width:100%;overflow:hidden">
   <script type='text/javascript'>
   var largcol = new Array()
   for (i=1;i<5;i++){
   largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth)-3 + "px";
  }
   for (i=0;i<55;i++){
   document.write("\<tr\>\<td style='width:"+largcol[1]+"'\>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf &nbsp;\<\/td\>\<td style='width:"+largcol[2]+"'\>two\<\/td\>\<td style='width:"+largcol[3]+"'\>three\<\/td\>\<td style='width:"+largcol[4]+"'\>four\<\/td\>\<\/tr\>" )
   }
   </script>
   </table>
   <div>
  
   </body>
  
   </html>
Bien sur ce n'est pas de moi
Avatar du membre
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 22222
Enregistré le : septembre 27, 2002, 9:41 pm

en vertical

Message par Aurelienazerty »

L'idée est pas mal, mais le scroll n'est pas au bon endroit (vertical, je cherche un horizontal)
Avatar du membre
Davidazerty
l'élu
Réactions :
Messages : 2415
Enregistré le : octobre 12, 2002, 3:30 pm

Message par Davidazerty »

Tu veux faire ca avec un iFrame dans le tableau.

Code : Tout sélectionner

<html>   
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>one</title>
    <style type='text/css'>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
    </style>
</head>
<body>
   <table border="0" width="300px" style="overflow:hidden;">
   <tr>
       <td width="200px">libelle one</td>
       <td rowspan="3">
          <iFrame src="...." width="100%" style="scrolling:auto;border:0px"></iFrame></td></tr>
   <tr>
       <td width="200px">libelle two</td></tr>
   <tr>
       <td width="200px">libelle three</td></tr>
   </table>
</body>
</html>
Voici la doc sur la balise iFrame.
http://www.w3schools.com/tags/tag_iframe.asp
Avatar du membre
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 22222
Enregistré le : septembre 27, 2002, 9:41 pm

ou pas

Message par Aurelienazerty »

Sans Iframe, ça serait mieux, sachant que sur un DIV, en jouant avec le propriété overflow, tu peux avoir le même effet.
Mais merci quand même
Avatar du membre
Nicolazerty
l'élu
Réactions :
Messages : 4050
Enregistré le : septembre 27, 2002, 2:59 pm

Message par Nicolazerty »

rassures moi c'est pas pour un usage pro ta demande?
Résistance !
Avatar du membre
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 22222
Enregistré le : septembre 27, 2002, 9:41 pm

C'est bon

Message par Aurelienazerty »

Répondre