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

Message par **Aurelienazerty** » octobre 10, 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.

marm · Message par **marm** » octobre 10, 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

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

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

Davidazerty · Message par **Davidazerty** » octobre 10, 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

Message par **Aurelienazerty** » octobre 11, 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

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

rassures moi c'est pas pour un usage pro ta demande?

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

J'ai résolu mon problème grâce à ces 2 sites:

Team-Azerty

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

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

en vertical

ou pas

C'est bon