Comment créer un tableau HTML de la même largeur que la balise div qui le contient?
J'ai une table à l'intérieur d'un div. Je veux que la table occupe toute la largeur de la balise div.
Dans le CSS, j'ai défini la largeur du tableau à 100%. Malheureusement, lorsque la division a une marge, la table est plus large que la division dans laquelle elle se trouve.
Je dois prendre en charge IE6 et IE7 (car il s'agit d'une application interne), bien que, de toute évidence, j'aimerais une solution intégrant plusieurs navigateurs, si possible!
J'utilise le DOCTYPE suivant ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Edit : Malheureusement, je ne peux pas coder en dur la largeur car je génère dynamiquement le code HTML et il inclut l'imbrication récursive des divs l'un dans l'autre (avec une marge gauche sur chaque div, cela crée un effet 'imbriqué' de Nice ).
Ajoutez le CSS ci-dessous à votre <table>:
table-layout: fixed;
width: 100%;
Ce qui suit fonctionne pour moi dans Firefox et IE7 ... une directive, si: Ceci est vrai surtout si vous mélangez des unités, par exemple des pourcentages et des pixels.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; background-color:#F33;">
This is the outer div
<div style="background-color: #FAA; padding: 10px; margin:10px;">
This is the inner div
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Voir ici pour un exemple.
Les largeurs en pourcentage sont relatives au premier élément parent pour lequel une largeur est spécifiée. Si votre div n'a pas de largeur spécifiée alors la largeur de la table n'a rien à voir avec cela. Pouvez-vous publier une version simplifiée du balisage indiquant à quoi ressemble votre arborescence DOM?
Sous un autre angle, si votre div parent a une largeur définie et que la marge affecte toujours votre table, vous êtes probablement en mode quirks. Vous avez spécifié votre DOCTYPE, mais sachez que l'élément DOCTYPE DOIT être la première ligne du fichier. Autre chose à noter quand vous manipulez IE6, par défaut, si votre contenu est plus large que votre parent, le parent sera mis à rude épreuve, vous pouvez l'arrêter en ajoutant overflow: hidden à votre css pour l'élément parent, mais vous risqueriez de masquer le processus. une partie du contenu de l'élément enfant.
Je ne sais pas vraiment quel est le problème ici - cela fonctionne très bien dans IE6/7 et FF3. Définir la largeur de l'élément .container DIV définit la largeur de la table. L'ajout de marges à la div .container n'affecte pas la table. Peut-être qu'il y a quelque chose d'autre dans votre balisage/CSS qui affecte la disposition?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Boxes and Tables</title>
<style type="text/css">
div.container {
background-color: yellow;
border: 1px solid #000;
width: 500px;
margin: 5px auto;
}
table.contained {
width: 100%;
border-collapse: collapse;
}
table td {
border: 2px solid #999;
}
</style>
</head>
<body>
<div class="container">
<table class="contained">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
</thead>
<tbody>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
</tbody>
</table>
</div>
</body>
</html>
J'ai compris le coeur du problème ici. Cela a à voir avec border-collapse. J'ai le même problème depuis un moment maintenant. Comme les tables ont souvent des marges minces, le problème n’est pas évident pour la plupart des gens. Si vous mettez une table régulière avec une largeur de 100% dans un div, comme Nate, tout ira bien.
Cependant, si vous spécifiez border-collapse:collapse sur la table, celle-ci sera séparée de la div. Cela n’est pas évident pour la plupart des gens, car cela risque de ne déborder que d’un pixel, ou en fonction du contexte dans lequel il se trouve et de l’agent utilisateur, peut-être pas du tout.
Pour clarifier ce qui se passe, essayez ceci: Placez l'exemple de Nate à côté de l'exemple de David Heggie dans un fichier html.
Il semblera que les deux fonctionnent bien. Mais maintenant, changez le style en ligne TD de Nate en border: 40px solid blue. Changez le style de table de David en border: 40px solid #999;. À ce stade, la table de David sort de la division de 50% de sa frontière de chaque côté. Nate travaille toujours ... Mettez maintenant un style border-collapse:collapse sur la table de Nate et ses pauses.
C'est le border-collapse qui le cause!
Dans le cas où vous générez automatiquement du code pouvant comporter des marges, l'ajout d'un élément <div> simple et sans style, enveloppant votre tableau, pourrait faire l'affaire.
J'ai toujours utilisé <table width="100%">
Le code suivant fonctionne sur IE6/8, Chrome, Firefox, Safari:
<style type="text/css">
div.container
{
width: 500px;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
table.contained
{
width: 100%;
border: 1px solid blue;
}
</style>
<div class="container">
<table class="contained">
<tr>
<td>Hello</td><td>World</td>
</tr>
</table>
</div>
Essayez de copier-coller et de construire dessus (déplacez simplement la partie style vers l'en-tête ou dans un fichier .css séparé), peut-être que la façon dont vous insérez le CSS en ligne (en utilisant la balise style) a quelque chose à voir avec le problème, ou est-ce une autre CSS entourant les blocs de la table div? Flotter peut aussi causer des ennuis.
P.S. Je mets des bordures rouges et bleues pour voir où les zones se développent pour un contrôle plus visuel.
Peut-être cet article complet sur Internet Explorer et le modèle de boîte CSS aidera-t-il?
C’est le gros problème avec la façon dont CSS traite la propriété width et la raison pour laquelle Microsoft a implémenté le modèle de case différemment au début. Microsoft a perdu, et maintenant c'est soit la largeur, soit la marge/le remplissage/la bordure d'un élément.
La situation peut changer pour devenir meilleure dans CSS3 avec propriété de taille de boîte
débordement: auto; sur le div le plus extérieur peut vous aider si vous voyez des choses étranges, comme si le div le plus externe est plus petit que vous le souhaitez ou s'il ne prend pas toute la taille des div qu'il contient.
essaye ça:
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
en réglant le remplissage de la div sur zéro, vous supprimerez l'espace entre les bordures de la div et son contenu. en définissant la largeur de la table sur 100% et sa marge à zéro, vous supprimerez l'espace entre les bordures de la table et son conteneur.
Incidemment, y a-t-il une bonne raison pour que vous n'utilisiez pas le doctype strict? strict devrait toujours être la valeur par défaut. transitoire est uniquement destiné au code hérité.