2 Tabellen nebeneinander, zentriert

[Benne]

Hallo zusammen,

ich möchte gerne zwei Tabellen horizontal nebeneinander positionieren.
Dabei setze ich zunächst den Stil 'float: left' für die linke Tabelle. Das führt beinahe zum gewünschten Ergebnis.
Allerdings möchte ich beide Tabelle zum Vater Element zentriert ausrichten.
Unter Anwendung von 'margin-left: auto; margin-right: auto;' auf eine oder beide Tabellen werden diese unschön auseinander gerissen.

Wie könnte eine mögliche Lösung aussehen?

Besten Dank und Gruß,
Benne

[Rafael]

Wenn du weißt wie breit diese Tabellen sein werden:

Nimm einen Container und setze für diesen die Abstände. in diesem floaten die beiden Tabellen.

[Felix Riesterer]

Lieber Benne,

ich gehe jetzt einmal von folgendem Konstrukt aus:

<div id="tabellen-nebeneinander">  
    <table>  
        <tr><th>erste</th></tr>  
        <tr><td>Tabelle</td></tr>  
    </table>  
    <table>  
        <tr><th>zweite</th></tr>  
        <tr><td>Tabelle</td></tr>  
    </table>  
</div>

Wenn man nun die Tabellen als inline-Elemente anzeigen lässt, dann kann man die Eigenschaft text-align benutzen, um sie zentriert anzeigen zu lassen.

Dazu bedarf es zweier CSS-Eigenschaften, um es auch im IE hinzubekommen:

#tabellen-nebeneinander {  
    text-align: center;  
}  
  
#tabellen-nebeneinander table {  
    display: inline;  
    display: inline-table;  
}

Ich habe das jedenfalls so gemacht.

Liebe Grüße aus Ellwangen,

Felix Riesterer.