28172 sujets

CSS et mise en forme, CSS3

Comment caler la largeur d'une div en fonction de son contenu ?

Salut tout le monde ...
j'ai un petit problème tout simple...

Une de mes div charge un tableau via ajax.
par défaut la div prends la largeu disponible la plus grande, mon site étant en full screen, sa largeur est de 100% de l'écran ...
seulement voila, mon tableau chargé à l'intérieur à une largeur variable, par exemple 500px..

j'ai donc un espace vide à droite de mon tableau dans ma div ...
j'aimerai que ma div s'adapte à la largeur de mon tableau tout simplement ...

mais je dois garder un positionnement relatif ...
j'ai bien essayé 

position:absolute;
overflow:auto;
clear:both;

mais ça ne marche pas


possible ?
d'avance merci
++

edit : un exemple de ce que ça donne ...
j'aimerai avoir mes deux tableaux l'un en dessous de l'autre

<html><head><title>clear</title>
</head><body bgcolor="FFFFFF" text="#000000">


<div style="display: block; position: absolute; overflow: auto; clear: both; border:1px solid red; color:red; "> 
  <table border="1" cellspacing="1" cellpadding="4">
    <tr>
      <td>qsdqsdsqd</td>
      <td>sdsqdfsfqzf</td>
    </tr>
    <tr>
      <td>wdsfsf</td>
      <td>sdfsqdf</td>
    </tr>
    <tr>
      <td>sdwwds</td>
      <td>wdsfwsdf</td>
    </tr>
    <tr>
      <td>SDfsd</td>
      <td>sdfdsf</td>
    </tr>
    <tr>
      <td>sdfs</td>
      <td>dfdsf</td>
    </tr>
  </table>
</div>


<div  style="display: block; position: absolute;  clear: both; border:1px solid green; color:green; "> 
  <table border="1" cellspacing="1" cellpadding="4">
    <tr>
      <td>aaaaa</td>
      <td>zzzz</td>
    </tr>
    <tr>
      <td>ee</td>
      <td>rr</td>
    </tr>
    <tr>
      <td>tttt</td>
      <td>yyyy</td>
    </tr>
    <tr>
      <td>uuu</td>
      <td>iii</td>
    </tr>
   
  </table>
</div>

</body></html>

Modifié par NAS (20 Jan 2011 - 11:17)
bonjour,

le div pourrait etre formater comme un tableau et mis eventuellement en marge automatique.

display:table;position:static;border:1px solid;


Mais ce n'est pas compatible avec IE7 et moins.

Autre piste qui ne permettra plus de styler bordures ou fond de ces div mais autorisant encore a mettre les tableau en marge automatique:

display:inline;


Enfin la façon la plus classique en flottant, qui calera les tableaux a gauche par exemple :
float:left;clear:left;


GC
Selon le code exemple, le conteneur est un div.

Pour lui donner un comportement de tableau (taille adapter au contenu), on lui de se comporter comme tel via les styles:
display:table;


voilà pour la theorie.
Il y a aussi display:inline-block qui peut être intéressant. Même restriction que pour display:table, à savoir: support à partir d'IE8.

Remarque en passant:
- Les styles déclarés avec les attributs de mise en forme tel que bgcolor, c'est has been, c'est un peu la loose. Smiley cligne Ça vaut aussi pour les styles des tableaux, qui se définissent très bien en CSS.
- Les styles CSS déclarés en inline dans des attributs style c'est moins pire, mais c'est pas top non plus. Faites des feuilles de styles.
- Je ne vois pas de Doctype au début de ce code HTML. C'est sans doute une simple erreur d'inattention qui sera corrigée très vite. Jamais sans mon Doctype!
Modifié par Florent V. (20 Jan 2011 - 21:12)
Okay, merci pour vos réponses...

AU final j'ai géré ça avec du javascript pour être compatible avec cette daube infâme d'internet explorer... pfff ... sans commentaires, j'ai déjà la tension qui monte ...

Sinon pour les balises style et le doctype c'était juste pour faire un petit test et reproduire l'environnement vite fait pour que vous compreniez ... j'utilise des css en général ...

Bon ...ben on est pas sorti de l'auberge avec Internet explorer ... entre ça et les problèmes d'overlay sur les listes déroulantes qui déclenchent un mouseout n'importe comment ...
bref ...

merki
++
Sujet clos
Aller à