Tabelle vertikal ausrichten

[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