margin-bottom für table funktioniert nicht

[EMP3ROR]

Hallo,

Es gibt wahrscheinlich eine simple Lösung, aber ich schaffe es nicht, dass im Firefox ein Abstand unter meiner Tabelle angezeigt wird. Hier ist ein vereinfachtes Code-Beispiel:

<table style="background: red;
   margin-top: 50px;
   margin-bottom: 600px;
   margin-left: -600px;
   position: absolute;
   left: 50%;
   width: 1200px;
   height: 800px;
">
<tr><td></td></tr>
</table>

In Chrome dagegen werden wie erwartet die mit margin-bottom angegebenen 600px unten freigelassen.

 

[SpiceLab]

Chrome ignoriert mit dem "vereinfachten Code-Beispiel" gleichermaßen margin-bottom. Die Ursache findet sich in der absoluten Positionierung (zur horizontalen Zentrierung), die das Element aus dem normalen Textfluß herausnimmt.

Alternative Technik, um die Tabelle horizontal zu zentrieren:

table {
background:red;
margin:50px auto 600px;
width:1200px;
height:800px
}

Oder unter Einbeziehung der relativen Positionierung:

table {
background:red;
position:relative;
margin:50px auto 600px;
width:1200px;
height:800px
}

 

[EMP3ROR]

Hey, danke für die Antwort. Den Ansatz mit margin und auto hatte ich vorher auch, allerdings hat das mit position: absolute irgendwie nicht funktioniert. Ohne position: absolute gab es ein anderes Problem mit der z-Order. Aber mit position: relative wie in deinem zweiten Beispiel funktioniert jetzt alles perfekt!

 

[SpiceLab]

Ohne position: absolute gab es ein anderes Problem mit der z-Order. Aber mit position: relative wie in deinem zweiten Beispiel funktioniert jetzt alles perfekt!

Aus diesem Grund, oder möglicher weiterer absoluter Positionierungen innerhalb des Tabellengerüsts, habe ich die zweite Möglichkeit benannt