[CSS:]Zentrieren einer Tabelle

Diskutiere mit über: [CSS:]Zentrieren einer Tabelle im Web Page Design Forum

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    hallo zusammen,
    habe eben festegestellt, dass in Safari weder die konventionelle noch die moderne Methode zum Zentrieren von Blockelementen bei tabellen funktioniert:
    Code:
    <head>
        <style>
            div.center {
                text-align: center; 
                margin-left: auto;
                margin-right: auto;
            }       
        </style>
    </head>
    <body>
        <div class="center">
            <table border=1>
                <tr><td>bla</td></tr>
                <tr><td>fasel</td></tr>
            </table>
        </div>
    </body>
    Das Ding bleibt links kleben, obwohl es doch in der Mitte sein sollte, oder steh' ich irgendwo auf der Leitung?
     
  2. macom500

    macom500 MacUser Mitglied

    Beiträge:
    14
    Zustimmungen:
    0
    Registriert seit:
    13.01.2006
    Gib dem div-container mal eine fixed width...

    z.B.: width:300px; oder min-width:300px;
     
    Zuletzt bearbeitet: 10.12.2008
  3. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    Registriert seit:
    18.08.2005
    Eben. Da eine Tabelle ein Blockelement ist wird die doch sonst 100% breit? Da könntest du dir das Div doch fast schon sparen:

    <table width="400" border="0" cellspacing="0" cellpadding="0" style="margin: 0px auto;">
    <tr>
    <td>Test</td>
    </tr>
    </table>

    So in dem Dreh müsste das gehen
     
  4. macom500

    macom500 MacUser Mitglied

    Beiträge:
    14
    Zustimmungen:
    0
    Registriert seit:
    13.01.2006
    Zuletzt bearbeitet: 10.12.2008
  5. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    So gehts (auch ohne Breitenangabe, die ich nicht möchte):
    Code:
    <head>
        <style>
            div.center {
                text-align: center; 
            }       
            table { 
                margin-left: auto;
                margin-right: auto;
            }       
        </style>
    </head>
    <body>
        <div class="center">   
            <table border=1>
                <tr><td>bla</td></tr>
                <tr><td>fasel</td></tr>
            </table>
        </div>  
    </body>
    logisch erscheint mir das aber nicht.
    Der Container selbst ist doch auch ein Blockelement :confused:
     
  6. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Du wirst es kaum glauben, aber das div Element ist hier zwingend erforderlich, auch wenn das in meinem vereinfachten Codebeispiel nicht erkennbar ist ;).
     
  7. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    Registriert seit:
    18.08.2005
    Ok, wollt ja auch mal so tun als würd ich irgendwie was nützliches kluges zu sagen haben. Hast mich wieder abgeorfeigt ;)

    Der Container ist auch ein Blockelement, das ist richtig. Wenn du jetzt aber deinem div keine feste Breite zuweist und deiner table auch nicht haben beide eine Breite von 100%. Und das kann ja nicht zentriert werden. Und in deinem oberen Beispiel hattest du halt keine Breite im Container, darum konnte das nicht zentriert werden.

    Wenn du jetzt aber dem Container ne Breite von 300 Pixeln gibst, kann die Tabelle ja nicht breiter werden (die 300 Pixel sind ja dann praktisch die 100% für die Tabelle).

    Man könnte das Div auch einfach weglassen, und der Tabelle eine feste breite geben (entweder über width="300" oder style="width: 300px;") und diese dann mit margin: 0px auto; ausstatten, dann wär die auch zentriert, weil du ja die breite vorgibst.
     
  8. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    abgeohrfeigt?
    wieder?

    Noch nicht, aber jetzt :D:
    Eins ist nämlich falsch, an Deiner Erklärung: Eine Tabelle hat nicht von Haus aus die Breite 100% sondern eine vom Content abhängige Breite.
    Ansonsten überzeugt mich Deine erklärung - Danke.
     
  9. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    Registriert seit:
    18.08.2005
    Hmm? Ich dachte immer Blockelemente wären so breit wie man ihnen das erlaubt. Nachdem Tabellen Blockelemente sind hab ich eben angenommen, dass die dann auch die maximal verfügbare Breite in Beschlag nehmen. Naja, man lernt nie aus ;)

    Danke für die Info und hoffentlich klappts
     
Die Seite wird geladen...
Ähnliche Themen - [CSS ]Zentrieren einer Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
CSS: "float" und trotzdem zentrieren ? Web Page Design 16.08.2008
Bild mit CSS zentrieren Web Page Design 21.01.2004
Tabelle zentrieren mit CSS Web Page Design 17.03.2003

Diese Seite empfehlen

Benutzerdefinierte Suche