Zwei HTML-Tabellen nebeneinander, zentriert auf der Seite

Question

Ich habe zwei Tabellen auf einer Seite, die ich nebeneinander anzeigen möchte, und zentriere sie dann innerhalb der Seite (eigentlich innerhalb eines anderen div, aber das ist das einfachste ich könnte kommen mit):

<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> 

ich verstehe, dass es etwas mit der Tatsache zu tun, dass die Tische sind schweben, aber ich bin ratlos, wie zu verstehen, was ich fehle. Es gibt viele Webseiten, die etwas wie die Technik beschreiben, die ich hier zeige, aber auf jeden Fall funktioniert es nicht; die Tische klammern sich hartnäckig an den linken Rand.

Answer 1

Aus der Spitze meines Kopfes, könnten Sie versuchen, die "margin: 0 auto" für #Outer und nicht #inner.

Ich füge oft Hintergrundfarbe zu meinen DIVs hinzu, um zu sehen, wie sie auf der Ansicht liegen. Das könnte ein guter Weg sein, um zu diagnostizieren, was hier vor sich geht.

Answer 2

Das Problem ist, dass der DIV, der Ihre Tabellen zentrieren sollte, keine Breite definiert hat. Standardmäßig sind DIVs Blockelemente und nehmen die gesamte Breite ihres übergeordneten Elements ein - in diesem Fall das gesamte Dokument (das sich über das #Outer-DIV ausbreitet), sodass der automatische Randstil keine Auswirkungen hat.

Damit diese Technik funktioniert, müssen Sie einfach die Breite des div mit margin: auto auf alles außer "auto" oder "inherit" setzen (entweder einen festen Pixelwert oder einen Prozentsatz).

Answer 3

Geben Sie Ihrem inneren div eine Breite.

Beispiel

Ändern Sie Ihre 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> 

Um dies:

<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> 

Answer 4

Das Problem ist, dass Sie #inner einen Satz width (alles andere als auto oder inherit geben müssen). Der Trick margin: 0 auto; funktioniert nur, wenn das innere Element schmaler als sein Containerelement ist. Ohne width zu erhalten, wird #inner automatisch auf die volle Breite von #outer erweitert, was dazu führt, dass der Inhalt flush left bleibt.

Answer 5

Wenn es mir - ich würde so etwas tun:

<style type="text/css" media="screen"> 
table { border: 1px solid black;float:left;width:148px;} 
#table_container{width:300px;margin:0 auto;} 
</style> 

Mit dem Tisch wie:

<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> 

Answer 6

<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> 

Answer 7

Leider sind alle diese Lösungen stützen sich auf eine feste Breite Angabe . Da die Tabellen dynamisch generiert werden (statistische Ergebnisse aus einer Datenbank), kann die Breite nicht im Voraus bekannt sein.

<table align="center"><tr><td> 
//code for table on the left 
</td><td> 
//code for table on the right 
</td></tr></table> 

und das Ergebnis ist strömungstechnisch mit beliebigen Breiten und Seite (re) Größen (und reagiert ein perfekt zentriert Paar Tabellen, die:

Das gewünschte Ergebnis kann durch Umwickeln der beiden Tabellen in einer anderen Tabelle erreicht werden Das Tabellenattribut align = "center" könnte in ein äußeres div mit margin autos geholt werden.

Ich schließe, dass es einige Layouts gibt, die nur mit Tabellen erreicht werden können.

Answer 8

Ich weiß, das ist eine uralte Frage, aber hier geht es trotzdem.

Folgendes funktioniert in kompatiblen Browsern und IE8 im Standardmodus (d. H. Mit einem Doctype-Set).

#inner {text-align:center;} 
.t {display:inline-block;} 

Leider gibt es wirklich keine Möglichkeit, es zu optimieren, um in IE6 zu arbeiten. Für IE7 könnte das Hinzufügen eines Zooms: 1 zu den .t divs (über einen bedingten Kommentar) hilfreich sein, aber IE7 steht derzeit nicht zum Testen zur Verfügung.