transform wenn Brwoser kleiner als... Positionsprobleme

[Michael P.]

Da bei der Anzeige auf kleinen Bildschirmen der Titel der einzelnen Zellen der Tabelle zu lang ist, möchte ich diese drehen. Nun ergibt sich folgendes Problem:

Ich bekomme die einzelnen Titel nicht bündig zur unteren Zelle und die Zelle sollte eigentlich den Titel umschliessen, dieser ragt allerdings aus der jeweilgen Zelle.

Ich habe ein Beispiel hier online hinterlegt. Der Effekt sieht man, wenn man den Browser verkleinert.

http://www.cssdesk.com/NPmrn

Danke für Eure Hilfe

Michael P.

table {
width:70%;
border-collapse: separate; /*Zellzwischenräume*/
border-collapse: collapse; /*keine Zell-Zwischenräume*/
}

td {
border: 1px solid #000; 
width:20%
}

h3{
 text-align: center;
}

@media all and (max-width: 700px){

h3{
transform-origin: 30% 0;
min-height:20px;
-moz-transform:rotate(-90deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(-90deg); /* Safari */
-o-transform:rotate(-90deg); /* Opera */
-ms-transform:rotate(-90deg); /* IE9 */
transform:rotate(-90deg); /* W3C */
background:#ff0000;
text-align: left;
}   
}