Use a modern navigator who care about your privacy : Download 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
User avatar
Aurelienazerty
Webmaster / Président
Reactions: 49
Posts: 22484
Joined: September 27th, 2002, 7:41 pm

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

Post by 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: Select all

+-------------------------------------------+
+ 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
Reactions: 0
Posts: 24
Joined: July 17th, 2007, 1:20 pm

Post by marm »

Code: Select all

<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
User avatar
Aurelienazerty
Webmaster / Président
Reactions: 49
Posts: 22484
Joined: September 27th, 2002, 7:41 pm

en vertical

Post by Aurelienazerty »

L'idée est pas mal, mais le scroll n'est pas au bon endroit (vertical, je cherche un horizontal)
User avatar
Davidazerty
l'élu
Reactions: 3
Posts: 2423
Joined: October 12th, 2002, 1:30 pm

Post by Davidazerty »

Tu veux faire ca avec un iFrame dans le tableau.

Code: Select all

<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
User avatar
Aurelienazerty
Webmaster / Président
Reactions: 49
Posts: 22484
Joined: September 27th, 2002, 7:41 pm

ou pas

Post by 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
User avatar
Nicolazerty
l'élu
Reactions: 10
Posts: 4061
Joined: September 27th, 2002, 12:59 pm

Post by Nicolazerty »

rassures moi c'est pas pour un usage pro ta demande?
Résistance !
User avatar
Aurelienazerty
Webmaster / Président
Reactions: 49
Posts: 22484
Joined: September 27th, 2002, 7:41 pm

C'est bon

Post by Aurelienazerty »

Last 10 Members Who Visited This Topic

  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: chisamu and 0 guests