Aller au contenu

tableau qui déborde


vidzo

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

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.

Modifié par vidzo
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

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

Modifié par vidzo
Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...