Sebastian Müller-Bellé: Zentrierte Tabellen in Tabellen

Hallo Zusammen!

Ich habe ein Problem, dass mich jetzt schon seit vielen Stunden beschäftigt. Es geht um zentrierte Tabellen innerhalb von Tabellen. Eigentlich ja kein Problem, wie z.B. mit diesem Code-Stück:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html style="height:100%;">
<head>
<title>Tabelle in der Mitte</title>
</head>
<body style="height:100%;">
<table style="width:100%; height:100%;">
 <tr>
  <td style="text-align:center;">
   <table border="1" style="margin:auto;">
    <tr>
     <td>Zellinhalt</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Im Internet Explorer, Mozilla oder Camino werden die Tabellen korrekt angeziegt, aber weder Opera noch Safari (neueste Versionen) stellen die Tabelle zentriert dar. Was muss ich an dem Code ändern?

Wäre wirklich nett, wenn einer von euch mir da helfen könnte, da mich dieses Problem schon sehr viel Zeit gekostet hat.

Gruß,
Sebastian

  1. Hallo Sebastian,

    in meinem Opera 7.21 (Windows) funktioniert Dein Beispiel aber ganz hervorragend!

    Gruß
    Roland

    P.S.: Macht eine Höhenangabe im <html> Sinn?
    P.P.S.: border-Angaben besser mit Einheit: z.B. 1px

    1. Sorry, ich war zu schnell, vertikal geht es in Opera nicht, mein Fehler!

      Rols

      1. Hy

        Bei mir schon! Opera 7.21

        Gruss
        DaviD

        --

        sh:( fo:| ch:{ rl:( br: n4:& ie:% mo:| va:) de:] zu:} fl:| ss:| ls:$ js:(
        1. Opera kann ich momentan nicht testen, aber in Safari (DEM Browser für den Mac) funktioniert es definitiv nur horizontal und nicht vertikal!

          Weiß jemand Rat?

          1. Hi

            Weiß jemand Rat?

            Es wird etwas besser, wenn Du dem inneren <td> ein
            style="vertical-align:middle;" verpaßt, weiß nicht, 'ne Patentlösung isses nicht.

            Nur mit CSS hab ich mir mal sowas zusammengeklaubt (Ausschnitte):

            <head>
            .hor { text-align:center; position:absolute; top:50%; left:0px;
                   width:100%; height:1px;
                   overflow:visible; display:block;
                 }
            .inh { margin-left:-380px; position:absolute; top:-260px; left:50%;
                   width:760px; height:520px;}
                 }
            </head>

            <body>
            <div class="hor">
            <div class="inh">

            Zu zentrierende Inhalte

            </div>
            </div>
            </body>

            Damit kannst Du ein Rechteck _fester_ Größe, hier 760x520px, (hoffentlich) immer zentrieren, unabhängig von Auflösung/Fenstergröße.

            Getestet mit IE6, Opera 7.21 und NS 7.1 (NS4x kannste hierbei vergessen).

            Für andere Größen des Darstellungsbereichs mußt Du etwas rumschrauben, da die halben negativen Größen mit ins Spiel..

            Evtl. eine Alternative für Dich?

            Gruß
            Roland

        2. Hi DaviD

          Bei mir schon! Opera 7.21

          Nanu? Auch wenn Du das Fenster vertikal immer kleiner machst?

          Gruß
          Roland