Search code examples
htmlcsstextrotationvertical-alignment

Vertical alignment of rotated text in a table cell

I have rotated the text in my table headers and I am trying to align it with the bottom of the cell. Vertical alignment does not change anything so I have wrapped each element in a div and tried to make it work in that way with no success.

There is an example at http://jsfiddle.net/pelagic/faLVN/

HTML

<div id="galley">

<table width="115%">
<thead><tr>
  <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th colspan="11">Regions</th>
  <th width="25%" rowspan="2" class="vertical-label"><div class="vheader">References</div></th>
</tr>
  <tr>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Antarctic</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Arctic</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Baltic Sea</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Black Sea</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Caspian Sea</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Indo Pacific</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Mediterranean Sea</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">North Atlantic</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">North Pacific</div></th>
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">South Atlantic</div></th>
    <th width="auto" height="100px" class="vertical-label"><div class="vheader">South Pacific</div></th>
  </tr>
</thead>
<tfoot></tfoot>
<tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="alt"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>
</div>

CSS

#galley {
    width: 738px;
    height: auto;
    border: 1px #CCCCCC;
    float:none
}

#galley table, th, td {
    border: 1px solid black;
    border-collapse:collapse;
}

#galley th.vertical-label{
    -webkit-transform: rotate(270deg) ;
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
}

#galley th, th.vertical-label{
    font-family: "myriad Pro";
    font-decoration: bold;
}

#galley .vheader{
    display:table-cell; 
    vertical-align:bottom
}
Solution

  • use transform-origin

    #galley th.vertical-label{      
    -webkit-transform: rotate(270deg) translateX(100%) translateY(33%);
    -moz-transform: rotate(270deg) translateX(100%) translateY(33%);
    -o-transform: rotate(270deg) translateX(100%) translateY(33%);
     -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100%;
    writing-mode: lr-tb;
}

    DEMO