Jump to content
Sign in to follow this  
vidzo

tableau qui déborde

Recommended Posts

Bonjour,

J'ai un petit problème:

Mon site contient un tableau, qui se remplit dynamiquement à l'aide de la base de donnée. Sa largeur est donc variable.

Mon problème, c'est qu'il sort completement de mon design sur la droite. Il sort du bloc body, et même du bloc html.

J'ai pourtant mis des width: auto; sur tout mes blocs.

Pourquoi les blocs ne s'agrandissent pas en même temps que le tableau?

Merci de vos réponses.

Vidzo

Share this post


Link to post
Share on other sites

Bonjour,

Tu devrais mettre l'url de ton site pour que les experts puissent se rendre compte de visu ;)

Share this post


Link to post
Share on other sites

Je travaille sur le site de l'intranet d'une entreprise, et je ne peux malheuresement pas publier le site sur internet.

Si jamais je n'arrive vraiment pas a me faire comprendre, j'essairai de reproduire le même probleme sur une page visualisable sur le net.

Share this post


Link to post
Share on other sites

C'est quoi le problème exactement? Le tableau est trop large (par rapport à un gabarit fixe), ou le gabarit n'est pas assez large par rapport au tableau?

Tu utilises la propriété CSS "position"? Le contenu de ton tableau contient du texte non-sécable (des URLs par exemple)?

C'est vrai qu'avec un exemple on irait nettement plus vite...

Jacques.

Share this post


Link to post
Share on other sites

http://julien.lutel.free.fr/index.php?page=testtab3

Voila.

Je n'ai mis que la page en question, donc il y a certains warning, il ne faut pas y faire attention.

Le cadre rouge délimite le bloc html, le bleu le bloc body.

Moi je veux que le tableau tienne dans le bloc "contenu", qui est délimité par la bordure grise.

Dans mon CSS, j'ai mis tout les width en auto.

Mon tableau contient en effet du texte non-sécable

Mon code:

Index.php (ouverture et fermeture des div)

<?php


include("head.php");

$page = $_GET['page'];

if (!isset($page) || !file_exists("$page.php") || $page == "index")
{
$page = "accueil";
}

echo "<div id=\"corps\">";
include("menu.php");
echo "
<div id=\"contenu\">
";
include("$page.php");
echo "
</div> <!--Fin du contenu-->

</div> <!--Fin du corps-->\n";

include("bas.php");

?>

La page testtab3.php (raccourcie):

				<table>

<tr>
<th >test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>

</tr>

<tr>
<td>azertyuiopqsdfghjkl</td>
<td>azertyuiopqsdfghjkl</td>
<td>azertyuiopqsdfghjkl</td>
<td>azertyuiopqsdfghjkl</td>
<td>azertyuiopqsdfghjkl</td>
<td>azertyuiopqsdfghjkl</td>
</tr>
</table>

Et enfin, le CSS qui nous intéresse ici:


html{
background-image : url("../images/fond.png");
border: 7px solid red;
}

body{
background-image : url("../images/corps.png");
background-repeat : repeat-xy;
width : auto;
min-width : 1180px;
margin-left : 20px;
font-family : Verdana, Trebuchet MS, sans-serif;
font-size : 13px;
border: 6px solid black;
}

#haut
{
width: 1150px;
height: 131px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
border: 6px solid pink;
}

#corps{
width : auto;
height: auto;
margin-left: 13px;
margin-right: 13px;
border: 6px solid green;
}

#contenu{
padding:15px 0 0 15px;
min-height: 500px;
width: auto;
text-align : justify;
border: 15px solid #c3c3c3;
}

#menu {
height : 40px;
font-size:100%;
line-height:normal;
margin-bottom: -2px;
font-size : 15px;
border: 6px solid orange;
}

#bas{
text-align : center;
border: 6px solid brown;
}

Si je mets une grande taille manuellement aux width ( 1700px par exemple), ca marche. Mais je ne veux pas que le site soit aussi large lorsque le tableau est moins large, ou lorsqu'il ne s'affiche pas. Je pensais que le fait de mettre auto reglerait mon problème, apparement non.

Edited by vidzo

Share this post


Link to post
Share on other sites

J'ai mis (de très jolis) cadres de couleurs pour visualiser mes différents blocs, ca pourra peut être vous aider à comprendre.

Le cadre rouge: balise html

noir: body

rose: div haut

marron: div "bas"

vert: div "corps"

jaune : div "menu"

gris : div "contenu"

http://julien.lutel.free.fr/index.php?page=testtab3

Edited by vidzo

Share this post


Link to post
Share on other sites

En fait le problème est assez simple: la largeur "automatique" d'un bloc (normal, i.e. display: block) dépend (entre autres choses) de la taille du contenant, et pas celle de son contenu.

Deux solutions:

- forcer la largeur du div en question (ou de n'importe quel bloc entre lui et le body/html, ce dernier compris) en fonction de la taille de ta table (à calculer en fonction des colonnes affichées, ou d'un coup de JS...). Pas très élégant, mais ça peut très bien marcher dans de nombreux cas;

- mettre display: inline-block sur le bloc contenant tout qui doit s'aggrandir (le div id=corps par exemple). Mais je n'utilise jamais ça donc je ne pourrais pas te dire les conséquences que ça pourrait avoir (en termes de compatibilité en particulier).

Il y a peut-être de gars plus doués que moi en CSS dans les parages :-)

Jacques.

Share this post


Link to post
Share on other sites

Ca marche parfaitement sur firefox, mais pas sur IE. En tout cas merci, ca m'enlève déja une épine du pied.

Share this post


Link to post
Share on other sites

Bonjour,

Tu as également la possibilité d'ajouter la propriété CCS "overflow" au conteneur de ton tableau :

#contenu {
overflow: auto;
}

Cette propriété permet de contrôler la méthode appliquée par le navigateur lorsqu'une dimension d'un conteneur est dépassée par celle de son contenu. En définissant une largeur à ce conteneur et cette nouvelle propriété avec comme valeur "auto", le conteneur aura une barre de défilement horizontale lorsque le contenu sera trop long. Lorsqu'il sera plus court, il n'y aura pas de barre de défilement... seul bémol, tu n'as pas de contrôle sur la mise en forme de ses barre de défilement et la barre horizontale est affichée en bas du conteneur.

Bonne continuation.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...