Tabellen

[Rita Rosenkohl]

<section>
<table class="table">

</table>
<br style="clear:both;">

</div>

Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen. Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst.

.table { display: inline-block; width:45%; text-align: left; }

text-align und width sind ebenfalls überflüssig.

Worauf ich hinaus will: Deine Problemlösung könnte eigentlich aus der einzelnen Zeile mit display:inline-block bestehen. Leider verschleierst du das mit dem ganzen Budenzauber drumherum.

Und dann muss ich dummerweise anfügen, dass display:inline-block bei einem Tabellenelement in die Hose gehen dürfte, da diese ihren eigenen display-Wert table haben. Vermutlich muss stattdessen jede Tabelle einzeln in ein <div> gekapselt und diesen dann jeweils display:inline-block verpasst werden.