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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionner des éléments dans un cellule de tableau

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionner des éléments dans un cellule de tableau

n°1415653
Remy90
Posté le 28-07-2006 à 23:45:23  profilanswer
 

Bonjour,
Je souhaite positionner des éléments <DIV> dans une cellule de tableau <TD>... Et je ne sais pas comment m'y prendre...
J'ai essayé de positionner la <DIV> en relatif, ceci ne fonctionne pas (je pensais que le positionnement relatif se ferait par rapport à la <TD> )... :  
 
Si je met le style suivant, cela fonctionne sous Gecko mais pas sous MSIE
 

Code :
  1. td {
  2.       position : relative;   
  3.     }
  5.     div.ligneHaut {
  6.       position : relative; 
  7.       top : 5px;
  8.       left : 10px;
  9.     }
  11.     div.ligneBas {
  12.       position : relative; 
  13.       top : 10px;
  14.       left : -25px;
  15.     }
  16.   </style>


 
Voici ma page :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html>
  6. <head>
  8.   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </meta>
  9.   <meta http-equiv="Content-Style-Type" content="text/css"> </meta>
  10.   <meta http-equiv="Content-Language" content="fr"> </meta>
  11.   <title>Test</title>
  13.   <style type="text/css">
  15.     #divEnglobante {
  16.       width : 300px;
  17.       height : 100px;
  18.       overflow-y : scroll;
  19.       border : 1px solid purple;
  20.     }
  22.     table {
  23.       table-layout : fixed;
  24.     }
  25.    
  26.     td {
  27.       border : 1px solid red;   
  28.     }
  30.     div.divDeLaCellule {
  31.       overflow : hidden; /* Pour tronque le texte */
  32.     }
  34.     col.colonne1 {
  35.       width : 100px;     
  36.     }
  38.     col.colonne2 {
  39.       width : 50px;     
  40.     }
  42.     /* Ce qui suit :  
  43.        OK Gecko  
  44.        KO MSIE */
  45.     td {
  46.       position : relative;   
  47.     }
  49.     div.ligneHaut {
  50.       position : relative; 
  51.       top : 5px;
  52.       left : 10px;
  53.     }
  55.     div.ligneBas {
  56.       position : relative; 
  57.       top : 10px;
  58.       left : -25px;
  59.     }
  60.   </style>
  61. </head>
  63. <body>
  64. <div  id="divEnglobante" >
  65.    <table cellspacing=0  >
  66.      <colgroup>
  67.        <col class="colonne1"/> 
  68.        <col class="colonne2"/> 
  69.      </colgroup>
  70.      <tr>
  71.        <td>
  72.          <div class="divDeLaCellule">
  73.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  74.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  75.          </div>
  76.        </td>
  77.        <td>
  78.          &nbsp;
  79.        </td>
  80.      </tr>
  81.      <tr>
  82.        <td>
  83.          <div class="divDeLaCellule">
  84.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  85.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  86.          </div>
  87.        </td>
  88.        <td>
  89.          &nbsp;
  90.        </td>
  91.      </tr>
  92.      <tr>
  93.        <td>
  94.          <div class="divDeLaCellule">
  95.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  96.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  97.          </div>
  98.        </td>
  99.        <td>
  100.          &nbsp;
  101.        </td>
  102.      </tr>
  103.      <tr>
  104.        <td>
  105.          <div class="divDeLaCellule">
  106.            <div class="ligneHaut" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  107.            <div class="ligneBas" >je&nbsp;souhaite&nbsp;que&nbsp;ce&nbsp;texte&nbsp;soit&nbsp;tronque</div>
  108.          </div>
  109.        </td>
  110.       <td>
  111.          &nbsp;
  112.        </td>
  113.      </tr>
  114.    </table>
  115. </div>
  116. </body>
  117. </html>

mood
Publicité
Posté le 28-07-2006 à 23:45:23  profilanswer
 

n°1415675
AlphaZone
Posté le 29-07-2006 à 08:43:21  profilanswer
 

Peux-tu m'expliquer quel est l'interêt de mettre des div dans un tableau ? J'avoue que je calle...

n°1415694
Remy90
Posté le 29-07-2006 à 11:50:56  profilanswer
 

Bonjour,
 
Voici ce que je souhaite faire.
- Une DIV de hauteur fixe mais 'scrollable'.
- Dans cette DIV un tableau.
- Le scroll de la DIV permet de voir la totalité du tableau.
- Dans les cellules du tableau je souhaite pouvoir disposer un libellé (à partir du coin haut gauche) et un pictogramme (cadrer en bas à gauche de la cellule).
J'espère avoir été clair...
 
Je me suis donc dis que pour faire ceci il suffisait de mettre des DIV (une pour le texte et une pour le pictogramme) dans la cellule TD. De positionner celles ci en relatif.
Pour feinter (ou me croyant plus malin que les moteurs de rendus) j'ai forcé le positionnement de la TD en relatif. Cela fonctionne très bien sous Firefox mais pas sous MSIE, le tableau 'sort de la DIV'.
 
Merci.
Rémy.

n°1415697
mIRROR
Chevreuillobolchévik
Posté le 29-07-2006 à 11:56:43  profilanswer
 

mais ta table n a pas besoin d etre dans une div ...c est deja une div elle meme [:pingouino]
et pour un truc du genre  
ma phrase
mon image  
t as pas besoin de creer des divs supplementaires [:pingouino]

n°1415714
Remy90
Posté le 29-07-2006 à 12:35:43  profilanswer
 

mIRROR, peux tu modifier mon code pour régler le problème. Je ne vois pas comment procéder.
Merci.
Rémy.

Message cité 1 fois
n°1415715
mIRROR
Chevreuillobolchévik
Posté le 29-07-2006 à 12:41:11  profilanswer
 

Remy90 a écrit :

mIRROR, peux tu modifier mon code pour régler le problème. Je ne vois pas comment procéder.
Merci.
Rémy.


 
 
non
de rien
[:natas]

n°1415716
Remy90
Posté le 29-07-2006 à 12:47:07  profilanswer
 

Citation :

mais ta table n a pas besoin d etre dans une div ...c est deja une div elle meme [:pingouino]
et pour un truc du genre  
ma phrase
mon image  
t as pas besoin de creer des divs supplementaires [:pingouino]


 
mIRROR,
Heu... Des réponses comme ca je peux en faire des dizaines par jours...
En tout cas merci de ton secours...
Tes compétences en la matière m'ont beaucoup aider...
C'est quoi ton trip là ?
 
Rémy.

n°1415719
Hermes le ​Messager
Breton Quiétiste
Posté le 29-07-2006 à 12:53:26  profilanswer
 

On se calme tout le monde.
 
1) Il a besoin de son div pour le scroll car une table ou un td ne scroll pas (du moins pas chez tous les navigateurs).
2) Pour les autres questions, tu peux positionner les éléments à l'intérieur de tes cellules en absolute à condion bien sûr que la hauteur des cellules soient précisées.

n°1415721
Remy90
Posté le 29-07-2006 à 13:00:55  profilanswer
 

Merci Hermes...
Si je positionne les DIV à l'intérieur du TD en absolue, ceci 'explose' complètement le tableau..  :(  
 

Code :
  1. div.ligneHaut {
  2.       position : absolute; 
  3.       top : 5px;
  4.       left : 10px;
  5.     } 
  7.     div.ligneBas {
  8.       position : absolute; 
  9.       top : 10px;
  10.       left : -25px;
  11.     }


 
En fait mon code fonctionne très bien sous Gecko, mais je dois assurer la compatibilité...
Rémy.

Message cité 1 fois
n°1415722
Hermes le ​Messager
Breton Quiétiste
Posté le 29-07-2006 à 13:02:19  profilanswer
 

Remy90 a écrit :

Merci Hermes...
Si je positionne les DIV à l'intérieur du TD en absolue, ceci 'explose' complètement le tableau..  :(  
 

Code :
  1. div.ligneHaut {
  2.       position : absolute; 
  3.       top : 5px;
  4.       left : 10px;
  5.     } 
  7.     div.ligneBas {
  8.       position : absolute; 
  9.       top : 10px;
  10.       left : -25px;
  11.     }


 
En fait mon code fonctionne très bien sous Gecko, mais je dois assurer la compatibilité...
Rémy.


 
Au lieu des top et des left, utilise margin-top, margin-left. :o
 
Et fixe la hauteur de tes cellules...

mood
Publicité
Posté le 29-07-2006 à 13:02:19  profilanswer
 

n°1415723
Remy90
Posté le 29-07-2006 à 13:10:36  profilanswer
 

Merci Hermes...
 
Le problème est que je suis susceptible de pouvoir positionner plusieurs DIV dans la TD. Dans mon exemple j'en ai mis uniquement deux.
Avec margin, je ne vois pas comment positionner plusieurs DIV les unes par rapports aux autres, mêmes si elles sont flottantes.
As tu le temps de tester ma page dans Firefox et MSIE pour bien comprendre mon soucis...
 
PS : Concernant le 'on se calme', je n'étais pas énervé simplement 'agacé'  ;).  
 
Rémy.


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

  Positionner des éléments dans un cellule de tableau

 

Sujets relatifs
Comparer 2 tableau[FLASH/AMFPHP] Transférer un tableau vers un service PHP
survol de cellule[VBA-E] Gérer le changement de sélection d'une cellule
tableau horizontalgros probleme de tableau
Ajout d'une cellule dans table = plus dans le formRecherche de l'adresse d'une cellule
PHP/MSSQL: réaffichage contenu tableau sur page PHP 
Plus de sujets relatifs à : Positionner des éléments dans un cellule de tableau

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.084 secondes

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