Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1225 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme DIV scrollable dans un Tableau

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme DIV scrollable dans un Tableau

n°1333672
massamu
Posté le 28-03-2006 à 14:23:23  profilanswer
 

Salut,
 
Je cherche a integrer une DIV dans un TD de manière a ce que si le contenu du DIV est trop grand (en largeur) une barre de scroll aparaisse.
 
Le soucis est que j'aimerais fixer la DIV a 100% et non pas a une taille fixe en pixel.
 
J'ai utilisé la propriété OVERFLOW : scroll, mais sa ne marche pas.
Quand je fixe a 100%, mon tableau se trouve automatiquement grandit egalement ! :??:
 
Donc la je suis completement bloqué, je ne sais pas comment faire
 
Si vous avez une petite idée, sa serais pas de refus :)
 
Ps : quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc... merci ;)
 
 
 
Mon code :
 
 
 
<table cellSpacing="0" cellPadding="5" width="100%" border="0" style="Overflow:scroll">
 <tr>
  <td width="60%">Filtrer par agence et/ou par activité, par CAF.</td>
  <td width="20%"><asp:button id="btnImprimer" Runat="server" Text="Imprimer"></asp:button></td>
  <td width="20%"><asp:button id="btnExporter" Runat="server" Text="Exporter"></asp:button></td>
 </tr>
 <tr>
  <td style="HEIGHT: 5px" colSpan="3">Facturation</td>
 </tr>
 <tr height="250">
  <td colSpan="3">
   <div class="divmain" id="TotauxFacturation">
   <table cellSpacing="0" cellPadding="0" width="100%" border="0">
    <tr>
     <td style="BACKGROUND-COLOR: #66ffff">Total PV Prév. :</td>
    </tr>
   </table>
   </div>
  </td>
 </tr>
</table>
 
Contenu de la class DIVMAIN :
 
.divmain {    
 position:relative;
             width: 100%
             height: 400px;
 overflow:scroll
}


Message édité par massamu le 28-03-2006 à 14:25:02
mood
Publicité
Posté le 28-03-2006 à 14:23:23  profilanswer
 

n°1333678
anapajari
s/travail/glanding on hfr/gs;
Posté le 28-03-2006 à 14:27:35  profilanswer
 

essaye en mettant l'overflow sur ton td ...
quand a

Citation :

quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc...


ça n'a STRICTEMENT RIEN A VOIR!!! Utiliser de l'ASP n'est en rien en excuse pour utiliser des tableaux pour de la mise en page HTML...

n°1333755
Shinuza
This is unexecpected
Posté le 28-03-2006 à 15:44:59  profilanswer
 

anapajari a écrit :

essaye en mettant l'overflow sur ton td ...
quand a

Citation :

quand a l'utilisation de tableaux, c'est dans le cadre d'une page ASP.NET, donc evitons les derives CSS etc...


ça n'a STRICTEMENT RIEN A VOIR!!! Utiliser de l'ASP n'est en rien en excuse pour utiliser des tableaux pour de la mise en page HTML...


+1
 
Les tableaux imbriqués c'est moyen.
 
De plus :
 
OVERFLOW : scroll
 
Ca ne s'utilise pas sur un tableau, à ma connaissance c'est compatible uniquement avec une DIV.


Message édité par Shinuza le 28-03-2006 à 15:45:37

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1333766
massamu
Posté le 28-03-2006 à 15:56:22  profilanswer
 

Ma remarque est basé sur les projets ASP, car je suis contrait d'utiliser cette methode la, ne me demandé pas pourquoi j'en ai pourtant parler a mon chef de projet.
 
Donc jprefere qu'on se focalise sur mon probleme qui je crois n'a pas de solution.
 
J'ai essayé un Overflow sur le TD et sa ne change rien, je crois que c'est un truc qu'est impossible a gerer, me trompe-je ?

n°1334321
nargy
Posté le 29-03-2006 à 02:09:56  profilanswer
 

une iframe?

n°1334427
freed102
Arayashiki
Posté le 29-03-2006 à 11:06:43  profilanswer
 

ça ça a l'air de marcher non ?

Code :
  1. <table width="200" border="0">
  2. <tr valign="top">
  3.  <td width="100" height="50">&nbsp;</td>
  4.  <td width="100" height="50">&nbsp;</td>
  5. </tr>
  6. <tr valign="top">
  7.  <td width="100" height="50">&nbsp;</td>
  8.  <td width="100" height="50" ><div style="width:100%;height:100%;overflow:scroll;">Lorsqu'un lion, un z&egrave;bre, une girafe,
  9. un hippopotame et une poign&eacute;e
  10. de pingouins psychotiques fuient leur zoo new-yorkais
  11. pour secourir l'un des leurs,
  12. l'aventure s'&eacute;crit avec un grand A.
  13. Et lorsque le destin les r&eacute;unit sur l'&icirc;le de Madagascar,
  14. ils doivent apprendre en formation acc&eacute;l&eacute;r&eacute;e
  15. les rudiments de la vie &agrave; l'air libre</div> </td>
  16. </tr>
  17. </table>


http://www.freedfromparis.com/temp/OR/_test/test3.htm
 
je pense qu'il faut que tu donnes une taille fixe à ton td dans lequel tu mets ton div, car la valeur 100% est par rapport à l'élément parent il me semble... sinon ça marche pas


Message édité par freed102 le 29-03-2006 à 13:00:18
n°1334509
MrNatas
Parle klingon couremment
Posté le 29-03-2006 à 12:16:07  profilanswer
 

massamu a écrit :


J'ai essayé un Overflow sur le TD et sa ne change rien, je crois que c'est un truc qu'est impossible a gerer, me trompe-je ?


 
L'overflow, c'est dans le DIV qu'il faut le mettre.
 
<div class="divmain" id="TotauxFacturation" style="overflow:scroll;">  
 
Si je dis pas de bêtises.
 

Message cité 1 fois
Message édité par MrNatas le 29-03-2006 à 12:17:50
n°1334544
Shinuza
This is unexecpected
Posté le 29-03-2006 à 12:57:51  profilanswer
 

C'est ça effectivement


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1334777
massamu
Posté le 29-03-2006 à 17:47:16  profilanswer
 

MrNatas a écrit :

L'overflow, c'est dans le DIV qu'il faut le mettre.
 
<div class="divmain" id="TotauxFacturation" style="overflow:scroll;">  
 
Si je dis pas de bêtises.


 
J'ai essayer egalement, sa ne fonctionne pas, le DIV force la taille du  TD le contenant

n°1334784
MrNatas
Parle klingon couremment
Posté le 29-03-2006 à 17:52:51  profilanswer
 

je vois ce que tu veux dire...
Tu pourrais essayer en mettant ton div en dehors de ton tableau et en lui mettant une position en absolute là ou tu veux le placer, ça fera comme si.

mood
Publicité
Posté le 29-03-2006 à 17:52:51  profilanswer
 

n°1334824
massamu
Posté le 29-03-2006 à 18:55:32  profilanswer
 

Si je le met Hors de mon tableau plus rien n'empechera au DIV de grandir horyzontalement.
 
J'aimerais eviter de lui donner une taille fixe en pixel en fait, c'est pour ca que je l'ai inclu dans un TD, afin de le forcer a rester a l'interieur.

n°1334825
Shinuza
This is unexecpected
Posté le 29-03-2006 à 18:56:28  profilanswer
 

Je crois que tu dois définir une taille fixe pour la div pour qu'elle passe en overflow tout le contenu qui sortirait en temps normal.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1334827
massamu
Posté le 29-03-2006 à 18:57:59  profilanswer
 

Ok bah c'est bien dommage tout ca :(

n°1334838
MrNatas
Parle klingon couremment
Posté le 29-03-2006 à 19:04:13  profilanswer
 

Shinuza a écrit :

Je crois que tu dois définir une taille fixe pour la div pour qu'elle passe en overflow tout le contenu qui sortirait en temps normal.


 
Je crois même que t'en es sûr ^^ , ça semble logique !

n°1334839
Shinuza
This is unexecpected
Posté le 29-03-2006 à 19:04:28  profilanswer
 

Pourquoi ça?


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1334892
MrNatas
Parle klingon couremment
Posté le 29-03-2006 à 19:55:52  profilanswer
 

Parce que si tu met pas de taille fixe à ton div, c'est normal qu'il s'adapte au contenu. Il grandit au fur et a esure que tu le remplit.
 
Donc essaie width:800px; height:100px; overflow:scroll; ça va peut être marcher.

n°1334943
massamu
Posté le 29-03-2006 à 20:45:51  profilanswer
 

Le scroll fonctionne quand je met une taille fixe y'a pas de probleme ca :)
 
Le truc, c'est que j'aurais préféré que je le mette dans un TABLEAU, et qu'ensuite je lui mette width = 100% et que je mette a mon tableau la largeur 80% ainsi je suis sur que le DIV ne sera jamais trop large pour toutes les resolutions.
 
Je sais pas si je suis tres clair :??:
 
En gros si je met un taille fixe a mon DIV, il se peut qu'il soit trop large pour de basses résolutions ce qui ne m'arrange pas du tout.
 
Voila voila :)

n°1334953
MrNatas
Parle klingon couremment
Posté le 29-03-2006 à 20:56:35  profilanswer
 

Bah un petit script pour détecter les résolutions alors ?
 
A moins que tu ne mette la taille fixe qu'en  hauteur, mais je me demande si tu vas pas te retrouver avec un div de 300m de lomng....


Message édité par MrNatas le 29-03-2006 à 20:57:59
n°1335091
massamu
Posté le 29-03-2006 à 22:14:10  profilanswer
 

Voila c'est ce que sa donne, un DIV super large lol
 
Enfin bon c'est pas grave je le mettrais en taille fixe :)

n°1405806
nithril
Posté le 12-07-2006 à 18:04:12  profilanswer
 

massamu a écrit :

Voila c'est ce que sa donne, un DIV super large lol
 
Enfin bon c'est pas grave je le mettrais en taille fixe :)


 
J'ai le meme probleme.
Ca fonctionne sous IE et opera mais pas sous Firefox ou le div prend la taille du contenu...
Bref impossible d'avoir une page contenant une entete et un pied de page de taille fixe et un contenu prenant le reste de la place et scrollable sans recourir au script...
 

Message cité 1 fois
Message édité par nithril le 12-07-2006 à 18:05:51
n°1405822
Hermes le ​Messager
Breton Quiétiste
Posté le 12-07-2006 à 18:39:19  profilanswer
 

nithril a écrit :

J'ai le meme probleme.
Ca fonctionne sous IE et opera mais pas sous Firefox ou le div prend la taille du contenu...
Bref impossible d'avoir une page contenant une entete et un pied de page de taille fixe et un contenu prenant le reste de la place et scrollable sans recourir au script...


 
Non, c'est pas impossible. Faites une recherche avec mon nom, j'ai donné la solution il y a un ou deux ans de ça à peu près...  :o  

n°1405830
Hermes le ​Messager
Breton Quiétiste
Posté le 12-07-2006 à 18:47:24  profilanswer
 

La solution :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  5. <title>test</title>
  6.  <style type="text/css" media="screen"><!--
  7. html,body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden }
  8. .tbl-test  { position: absolute; width: 100%; height: 100% }
  9. .cell1 { background-color: #6fc; height: 50px }
  10. .cell2   { background-color: #900; vertical-align: top; height: 100% }
  11. .cell3 { background-color: #6ff; height: 50px }
  12. .inter    { position: relative; height: 100% }
  13. .tst-div          { color: white; position: absolute; width: 100%; height: 100%; overflow: auto }
  14. --></style>
  15. </head>
  16. <body>
  17. <table class="tbl-test" cellspacing="0" cellpadding="0">
  18. <tr>
  19.  <td class="cell1">
  20.  </td>
  21. </tr>
  22. <tr>
  23.  <td class="cell2">
  24.  <div class="inter">
  25.  <div class="tst-div">
  26.  machin...<br />
  27.  machin...<br />
  28.  machin...<br />
  29.  machin...<br />
  30.  machin...<br />
  31.  machin...<br />
  32.  machin...<br />
  33.  machin...<br />
  34.  machin...<br />
  35.  machin...<br />
  36.  machin...<br />
  37.  machin...<br />
  38.  machin...<br />
  39.  machin...<br />
  40.  machin...<br />
  41.  machin...<br />
  42.  machin...<br />
  43.  machin...<br />
  44.  machin...<br />
  45.  machin...<br />
  46.  machin...<br />
  47.  machin...<br />
  48.  machin...<br />
  49.  machin...<br />
  50.  machin...<br />
  51.  machin...<br />
  52.  machin...<br />
  53.  machin...<br />
  54.  machin...<br />
  55.  machin...<br />
  56.  machin...<br />
  57.  machin...<br />
  58.  machin...<br />
  59.  machin...<br />
  60.  machin...<br />
  61.  machin...<br />
  62.  machin...<br />
  63.  machin...<br />
  64.  machin...<br />
  65.  machin...<br />
  66.  machin...<br />
  67.  machin...<br />
  68.  machin...<br />
  69.  machin...<br />
  70.  machin...<br />
  71.  machin...<br />
  72.  machin...<br />
  73.  machin...<br />
  74.  machin...<br />
  75.  machin...<br />
  76.  machin...<br />
  77.  machin...<br />
  78.  machin...<br />
  79.  machin...<br />
  80.  machin...<br />
  81.  machin...<br />
  82.  machin...<br />
  83.  machin...<br />
  84.  machin...<br />
  85.  machin...<br />
  86.  machin...<br />
  87.  machin...<br />
  88.  machin...<br />
  89.  machin...<br />
  90.  machin...<br />
  91.  machin...
  92.  </div>
  93.  </div>
  94.  </td>
  95. </tr>
  96. <tr>
  97.  <td class="cell3">
  98.  </td>
  99. </tr>
  100. </table>
  101. </body>
  102. </html>

n°1405901
nithril
Posté le 12-07-2006 à 21:15:13  profilanswer
 

Yes merci!
 
Maintenant pourquoi ca marche ? J'imagine qu'en absolute il s'adapte au parent et non pas a son contenu

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme DIV scrollable dans un Tableau

 

Sujets relatifs
Problème avec un onblur...[résolu] Problème bouton / javascript
Problème de ponctuation ds un fichier texte dynamique ds flashTableau a 2 entrées et condition sous excel
Problème Validation cssProbleme de cryptage de mot de passe
pb tableau vbaProbleme pour Modifier mon formulaire
[resolu]Problème d'alignementTaille d'un tableau de tableau
Plus de sujets relatifs à : Probleme DIV scrollable dans un Tableau


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR