Vertical alignment of rotated text in a table cell

Question

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
}

Answer 1

Here's what [finally!] worked for me on a similar task, when also aligning an image icon below the text.

I wrapped the <td> contents in a <div> container, positioned and using transform: translateX(-50%).

See example snippet (below) or this pen.

.text { writing-mode: vertical-rl;
        height: 85px;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 0.95;
        text-align: right;
        left: 50%;
        transform: translateX(-50%);
        position: relative; }

th { font-weight: normal;
     padding: 0 5px;
     background: #282828;
     color: snow;
     border-left: 1px dotted #888; }

.text { writing-mode: vertical-rl;
        height: 85px;
        font-size: 13px;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 0.95;
        text-align: right;
        left: 50%;
        transform: translateX(-50%);
        position: relative; }

td { border: 1px dotted #ccc;
     text-align: center;
     padding: 1px 4px;
     font-size: 11px;}

body { font-family: verdana; }

table { border-collapse: collapse;
        border: 3px solid black; }

<table>
  <tr>
    <th>
      <div class='text'>Isle of Man</div>
      <img src='//i.stack.imgur.com/jbxgw.png'>
    </th>
    <th>
      <div class='text'>United Kingdom of Great Britain and Northern Ireland</div>
      <img src='//i.stack.imgur.com/a23pe.png'>
    </th>
    <th>
      <div class='text'>Fiji</div>
      <img src='//i.stack.imgur.com/oM6gP.png'>
    </th>
    <th>
      <div class='text'>Liechtenstein</div>
      <img src='//i.stack.imgur.com/94k6N.png'>
    </th>
  </tr>

  <tr>
    <td>4,330,455</td>
    <td>324,407</td>
    <td>-</td>
    <td>39</td>
  </tr>
  <tr>
    <td>4,315,687</td>
    <td>323,720</td>
    <td>-</td>
    <td>27</td>
  </tr>
  <tr>
    <td>4,282,164</td>
    <td>323,442</td>
    <td>-</td>
    <td>9</td>
  </tr>
</table>