28173 sujets

CSS et mise en forme, CSS3

[Resolu] Agrandissement d'une div à cause d'un tableau

Bonjour,

Le contexte : un écran qui fait du 800x600, un site tout beau en xhtml valide, une css qui va bien, etc, etc. Tout ce qui faut pour un site Smiley smile

Le problème : j'ai un tableau de reporting sur une des pages, il a bcp de colonne, et finalement, bcp trop Smiley ohwell Ce qui fait que je me retrouve à avoir ma <div id="content"> qui ne s'agrandit pas assez (pas au delà de la taille maximal de mon screen (800)), j'ai donc une coupure avec le coté droit de la div, et le tableau qui passe au dessus pour finir de s'afficher.

C'est assez gênant (le fond du bloc content ne suit pas, la bordure qui trace un trait dans mon tableau ...)

doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

header envoyé : application/xhtml+xml (j'ai du svg dans mes pages)
Mes utilisateurs sont uniquement sous gecko (firefox), je leur livre l'application cliente.

Merci d'avance, je suis à disposition pour plus d'informations.



xhtml

<div id="content">
<table>
...
</table>
</div>


css

#content {
background-color:#FFFFFF;
border:1px solid black;
margin-left:25px;
margin-right:10px;
margin-top:10px;
padding:10px;
position:relative;
text-align:justify;
top:140px;
width:95%;
}
#content table {
border-collapse:collapse;
border-spacing:0px;
margin-left:10px;
table-layout:fixed;
text-align:center;
vertical-align:middle;
width:1000px;
}
#content table td {
border: 1px solid black;
}
table {
background-color:#FFFFFF;
margin-right:auto;
}


La taille de ma table se fait à la volé en fonction du nombre de colonne demandé par l'utilisateur
Modifié par wako (30 Aug 2007 - 17:30)
Bonjour,

Il va falloir que tu décides du comportement voulu: que le conteneur s'élargisse pour contenir le tableau, ou que le tableau dépasse.

Dans le deuxième cas (le tableau dépasse), tu limites l'impact sur la lisibilité en donnant une couleur de fond à ton tableau (afin de ne pas voir la bordure de div#content, ou la couleur de fond de body, etc.).

Dans le premier cas (le conteneur s'élargit), ça peut être jouable avec un div#content en display: table (tout à fait utilisable si les pages ne sont pas destinées à IE), par exemple. Mais les conséquences sur la mise en page globale seront peut-être difficiles à gérer. À creuser...
Parfait, merci bcp

Tu me sauves de 2j de galère, et tu rassures 8 personnes qui ne trouvaient pas de solution.

J'avais totalement oublier que display pouvait prendre l'argument table oO

Merci infiniment.
Sujet clos
Aller à