Установка ширины ячейки <th> в css, если ячейки содержат повернутый (вертикальный) текст

Я пытаюсь установить ширину ячеек, которые содержат повернутый текст. Помимо первых трех столбцов остальная часть должна быть немного выше высоты шрифта вертикального текста. Остальное пространство можно разделить поровну между первыми тремя столбцами.

Я пробовал устанавливать ширину ячейки в CSS, но это не имеет никакого значения...

Вот пример: http://jsfiddle.net/pelagic/3Ggw6/1/

HTML

<div id="galley">
<table>
<thead><tr>
  <th colspan="3" class="vertical-label">&nbsp;</th>
  <th colspan="11"><div>Regions</div></th>
  <th width="5%" class="vertical-label">&nbsp;</th>
</tr>
  <tr>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="10" class="vertical-label"><div class="vheader">
      <div align="left">Antarctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Arctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Baltic&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Black&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Cas&#8226;pian&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Indo&nbsp;Pacific</div>
    </div></th>
    <th width="30" class="vertical-label"><div class="vheader">
      <div align="left">Mediterranean&nbsp;Sea</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Atlantic</div>
    </div></th>
   <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Pacific</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Atlantic</div>
    </div></th>
    <th width="auto" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Pacific</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">References</div>
    </div></th>
  </tr>
</thead>
<tfoot></tfoot>
<tbody><tr><td>Otariidae</td>
<td>Arctocephalus  pusillus</td>
<td>Cape or Australian fur  seal</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>Arctophoca gazella</td>
<td>Antarctic fur seal</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>A. tropicalis</td>
<td>Subantarctic fur seal</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 table {
table-layout: fixed;
width: 738px;
}

#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;
 }

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

}

#galley .vheader{
margin-left: 5px;
}