28172 sujets

CSS et mise en forme, CSS3

[RESOLU] <table> débordant en largeur sur un <div>

Bonjour,

j'ai un tableau qui dépasse d'un <div> sur le coté droit.
J'aimerais que le cadre du <div> englobe le <table>. Mais comment faire ?

Voici mon code HTML / CSS :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gestion</title>

<style type="text/css">
<!--
* {
	padding:0;
	margin:0;
}
html, body {
	width:100%;
	height:100%;
	/*max-width:1400px;*/
	
	font-family:Verdana, Arial, Helvetica, "Trebuchet MS", sans-serif;
	font-size:12px;
	color:#004B95;
}
div.zone-gestion {
	margin-bottom:10px;
	padding:10px;
	border: 2px outset #004b95;
	background-color: #e9f3fe;
}
th, td {
	padding:6px;
	border:1px solid #FF0000;
}
-->
</style>
</head>
<body>


<div class="zone-gestion">

<table>
    <thead>
    <tr>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
        <th>############</th>
    </tr>
    </thead>
	
    <tbody>
	<tr>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
        <td>############</td>
	</tr>
    </tbody>
</table>

</div>


</body>
</html>


Merci d'avance pour votre aide. Smiley cligne
Modifié par Tchupacabra (29 Apr 2008 - 10:24)
Je ne connais pas les propriétés de mise en forme d'un tableau mais je pense que dans ton CSS, il faudra définir la largeur de ta cellule 

th, td {
        Width: *valeur* en % ou en px;
	padding:6px;
	border:1px solid #FF0000;
}


Ou alors donner une valeur max à ta table...
Bonjour,

Les seuls moyens de forcer un div à s'adapter en largeur à son contenu sont:
- de faire flotter le div en question (float: left);
- de le passer en display: table-cell.
(J'oublie peut-être autre chose?)

Aucune de ces solutions n'est facilement gérable/compatible/etc. Donc je ne les recommande à priori pas.

Ensuite, il y a un problème de design: si le conteneur s'élargit pour englober le tableau, une partie de ton design risque d'être mise à mal...
À noter que la solution n'est peut-être pas technique mais tout simplement rédactionnelle (dans un dossier, on présente des tableaux synthétiques dans le corps principal, et les tableaux complets volumineux sur une page séparée ou en annexe...).

Que cherches-tu à faire exactement? Peut-on voir la page?
merci beaucoup pour ces précisions... Smiley smile

c'est pour un back-office. menu latéral gauche et contenu à droite.
donc si le tableau est grand, y aura un ascenseur horizontal "standard"...

je vais voir ce que je peux faire avec le post précédent.

@+ Smiley murf
Tableau à deux cellules (une pour le menu de gauche, une pour le bloc de droite). Ou bien on laisse dépasser, ou bien on simplifie le tableau de contenu, ou bien on rejette ce tableau sur une page dédiée en annexe.
bon, je m'en suis arrangé avec un scroll:auto

<div class="zone-gestion">

    <div style="scroll:auto">
    <table>
       ...
    </table>
    </div>

</div>


Merci à toi Florent V. Smiley cligne
Modifié par Tchupacabra (29 Apr 2008 - 10:25)
Sujet clos
Aller à