[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
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25089
Inscription : 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
Inscription : 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 de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25089
Inscription : 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 de l’utilisateur
Davidazerty
l'élu
Réactions :
Messages : 2443
Inscription : 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 de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25089
Inscription : 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 de l’utilisateur
Nicolazerty
l'élu
Réactions :
Messages : 4114
Inscription : septembre 27, 2002, 2:59 pm

Message par Nicolazerty »

rassures moi c'est pas pour un usage pro ta demande?
Résistance !
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25089
Inscription : septembre 27, 2002, 9:41 pm

C'est bon

Message par Aurelienazerty »