Tabelle vertikal ausrichten

[Michael K.]

Hallo,

Mich treibt die vertikale Ausrichtung zur Verzweiflung und all die Suche mit Google blieb erfolglos. Ich habe einen div Container mit fixer Hoehe von 500px. In diesem Container soll nun eine Tabelle dargestellt werden, die sowohl horizontal aus auch vertical mittig ausgerichtet ist. Die Hoehe der Tabelle ist unterschiedlich. Wie bekommt man nun diese Tabelle so dargetstellt? Die Loesung muss nur fuer Firefox und Chrome Browser funktionieren. IE ist nicht relevant.

Vielen Dank, bin am verzweifeln
Gruss

[Vinzenz Mai]

Hallo,

Ich habe einen div Container mit fixer Hoehe von 500px. In diesem Container soll nun eine Tabelle dargestellt werden, die sowohl horizontal aus auch vertical mittig ausgerichtet ist. Die Hoehe der Tabelle ist unterschiedlich. Wie bekommt man nun diese Tabelle so dargetstellt? Die Loesung muss nur fuer Firefox und Chrome Browser funktionieren. IE ist nicht relevant.

die vertikale Zentrierung ist recht einfach zu erreichen:

Ich gehe von folgendem HTML aus:

  <div id="container">  
    <table id="innen">  
    <thead>  
      <tr>  
        <th>ID</th>  
        <th>Vorname</th>  
        <th>Nachname</th>  
      </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>17</td>  
          <td>Markus</td>  
          <td>Münster</td>  
        </tr>  
        <tr>  
          <td>3</td>  
          <td>Michael</td>  
          <td>K.</td>  
        </tr>  
        <tr>  
          <td>14</td>  
          <td>pixxma</td>  
          <td>Canon :-)</td>  
        </tr>  
      </tbody>  
    </table>  
  </div>  

Mit folgendem CSS bekommst Du die vertikale Zentrierung hin:

  /* Behälter-Element auf display: table-cell setzen,  
     damit [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Textausrichtung#vertical-align_.28vertikale_Ausrichtung.29@title=vertical-align] den gewünschten Effekt hat  
     der Tabelle [ref:self812;css/eigenschaften/positionierung.htm#display@title=display]: inline-table geben.  
  
     Für die horizontale Zentrierung kommen für das Behälter-Element  
     eine Breite und [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Textausrichtung#vertical-align_.28vertikale_Ausrichtung.29@title=text-align]: center hinzu.  
  
     Erfolgreich getestet in Firefox 10, IE 9, Opera 11.61, aktuellem Chrome  
 */  
  #container {  
    height: 500px;            /* Deine Angabe :-) */  
    width:  700px;            /* erforderlich zum horizontalen Zentrieren */  
    border: 1px solid black;  /* Nur, um den Container sehen zu können */  
    display: table-cell;  
    vertical-align: middle;  
    text-align: center;  
  }  
  
  /* vertical-align wirkt auf inline-Elemente, also sorgen wir dafür,  
     dass die Tabelle entsprechend dargestellt wird. Dazu gibts inline-table */  
  #innen {  
    display: inline-table;  
  }  
  
  table {  
    border-collapse: collapse;     /* nicht notwendig, aber hübscher */  
  }  
  
  th, td {  
    border: 1px solid lightblue;   /* um es sehen zu können */  
    padding: 0.5em 0.2em;          /* ich mag Luft */  
  }  
  
  th {  
    background-color: lightblue;   /* auch nur, weil ich's so schöner finde */  
  }

Es wundert mich, dass $suchmaschine dazu schweigsam blieb ...
Andererseits richten sich meine Tabellen stets am oberen Rand des Behälter-Elementes aus.

Freundliche Grüße

Vinzenz

[Michael K.]

Hallo Vinzenz,

Danke fuer den Vorschlag, das funktioniert. Mit display:table-cell hatte ich es auch vorher schon probiert bin dann aber gescheitert weil die Tabelle nicht horizontal mitt war. Ich wollte es umgehen, eine feste Breite anzugeben (die 700px) in deinem Beispiel. Das habe ich bis jetzt immer noch nicht geschafft, werde wohl damit aber leben muessen.

Vielen Dank fuer die Hilfe

[Alex]

Hallo!

Ich wollte es umgehen, eine feste Breite anzugeben (die 700px) in deinem Beispiel. Das habe ich bis jetzt immer noch nicht geschafft, werde wohl damit aber leben muessen.

Naja, es muss nicht unbedingt eine Breite in px sein - Du kannst z.B. auch 100% angeben, damit das Element so breit wird wie sein Container. Ganz ohne Angabe (sprich: auto) geht's aber nicht, denn sonst ist das Element nur so breit wie für seinen Inhalt nötig, und damit erübrigt sich das Zentrieren.

Oder Du gibst dem div margin:auto, dann ist das div in seinem Elternelement zentriert.

Viele Grüße,
Alexander