[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
Messages : 18941
Enregistré le : septembre 27th, 2002, 9:41 pm

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

Message par Aurelienazerty » octobre 10th, 2007, 4:27 pm

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.
Aurelienazerty

Image

marm
Newbie
Messages : 24
Enregistré le : juillet 17th, 2007, 3:20 pm

Message par marm » octobre 10th, 2007, 4:50 pm

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
Messages : 18941
Enregistré le : septembre 27th, 2002, 9:41 pm

en vertical

Message par Aurelienazerty » octobre 10th, 2007, 4:57 pm

L'idée est pas mal, mais le scroll n'est pas au bon endroit (vertical, je cherche un horizontal)
Aurelienazerty

Image

Avatar du membre
Davidazerty
l'élu
Messages : 2366
Enregistré le : octobre 12th, 2002, 3:30 pm

Message par Davidazerty » octobre 10th, 2007, 8:22 pm

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
Messages : 18941
Enregistré le : septembre 27th, 2002, 9:41 pm

ou pas

Message par Aurelienazerty » octobre 11th, 2007, 9:42 am

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
Aurelienazerty

Image

Avatar du membre
Nicolazerty
l'élu
Messages : 3987
Enregistré le : septembre 27th, 2002, 2:59 pm

Message par Nicolazerty » octobre 11th, 2007, 1:38 pm

rassures moi c'est pas pour un usage pro ta demande?
Résistance !

Avatar du membre
Aurelienazerty
Webmaster / Président
Messages : 18941
Enregistré le : septembre 27th, 2002, 9:41 pm

C'est bon

Message par Aurelienazerty » octobre 11th, 2007, 3:30 pm

Aurelienazerty

Image

Répondre