Deux tableaux HTML côte à côte, centrés sur la page
J'ai deux tableaux sur une page que je veux afficher côte à côte, puis les centrer dans la page (en fait dans une autre div, mais c'est le plus simple que j'ai pu trouver):
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
<div id="outer">
<p>Two tables, side by side, centered together within the page.</p>
<div id="inner">
<div class="t">
<table>
<tr><th>a</th><th>b</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>4</td><td>9</td></tr>
<tr><td>16</td><td>25</td></tr>
</table>
</div>
<div class="t">
<table>
<tr><th>a</th><th>b</th><th>c</th></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>5</td><td>15</td></tr>
<tr><td>8</td><td>13</td><td>104</td></tr>
</table>
</div>
</div>
<div id="clearit">all done.</div>
</div>
Je comprends que cela a quelque chose à voir avec le fait que les tables sont flottantes, mais je ne comprends pas ce qui me manque. Il existe de nombreuses pages Web décrivant quelque chose comme la technique que je montre ici, mais quoi qu'il en soit, cela ne fonctionne pas; les tables s'accrochent obstinément au bord gauche.
Si c'était moi - je ferais quelque chose comme ça:
<style type="text/css" media="screen">
table { border: 1px solid black;float:left;width:148px;}
#table_container{width:300px;margin:0 auto;}
</style>
Avec la table comme:
<div id="table_container">
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>16</td>
<td>25</td>
</tr>
</table>
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>16</td>
<td>25</td>
</tr>
</table>
</div>
Malheureusement, toutes ces solutions reposent sur la spécification d’une largeur fixe. Les tables étant générées dynamiquement (résultats statistiques extraits d'une base de données), la largeur ne peut pas être connue à l'avance.
Le résultat souhaité peut être obtenu en encapsulant les deux tables dans une autre table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
et le résultat est une paire de tables parfaitement centrée qui réagit de manière fluide à des largeurs et à des tailles de page arbitraires (et l'attribut align = "center" pourrait être placé dans une division externe avec des modifications automatiques de marge).
Je conclus que certaines dispositions ne peuvent être réalisées qu'avec des tableaux.
Je réalise que la question est ancienne, mais voici quand même.
Ce qui suit fonctionnera avec les navigateurs compatibles et IE8 en mode standard (c’est-à-dire avec un ensemble de doctype).
#inner {text-align:center;}
.t {display:inline-block;}
Malheureusement, il n'y a vraiment aucun moyen de le modifier pour qu'il fonctionne dans IE6. Pour IE7, l'ajout d'un zoom: 1 aux divs .t (via un commentaire conditionnel) peut aider, mais IE7 n'est pas disponible pour les tests pour le moment.
Le problème est que vous devez donner à #inner un ensemble width (tout sauf auto ou inherit). L'astuce margin: 0 auto; ne fonctionne que si l'élément interne est plus étroit que son élément conteneur. Sans recevoir de width, #inner s'étend automatiquement sur toute la largeur de #outer, ce qui a pour effet de vider son contenu du contenu à gauche.
Donnez une largeur à votre div intérieur.
EXEMPLE
Changer votre CSS:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
Pour ça:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
Vous pouvez peut-être utiliser la "marge: 0 auto" pour #outer plutôt que #inner.
J'ajoute souvent des couleurs d'arrière-plan à mes DIV pour voir comment elles sont disposées dans la vue. Cela pourrait être un bon moyen de diagnostiquer ce qui se passe ici.
Le problème est que la DIV qui devrait centrer vos tables n'a pas de largeur définie. Par défaut, les DIV sont des éléments de bloc et occupent toute la largeur de leur parent - dans ce cas, le document entier (se propageant à travers la #outer DIV), de sorte que le style de marge automatique n'a pas d'effet.
Pour que cette technique fonctionne, il vous suffit de définir la largeur de la div qui a la marge: auto sur autre chose que "auto" ou "hériter" (valeur de pixel fixe ou pourcentage).
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
J'ai trouvé que je pouvais résoudre ce problème en plaçant simplement les tables côte à côte à l'intérieur d'une troisième table centrée. Voici le code
J'ai ajouté deux lignes de code en haut et en bas des deux tables existantes
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
<div id="outer">
<p>Two tables, side by side, centered together within the page.</p>
<div id="inner">
<table style="margin-left: auto; margin-right: auto;">
<td>
<div class="t">
<table>
<tr><th>a</th><th>b</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>4</td><td>9</td></tr>
<tr><td>16</td><td>25</td></tr>
</table>
</div>
<div class="t">
<table>
<tr><th>a</th><th>b</th><th>c</th></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>5</td><td>15</td></tr>
<tr><td>8</td><td>13</td><td>104</td></tr>
</table>
</div>
</td>
</table>
</div>
<div id="clearit">all done.</div>
</div>