表格单元格中旋转文本的垂直对齐方式

Question

我已旋转表格标题中的文本，并尝试将其与单元格底部对齐。垂直对齐不会改变任何东西，所以我将每个元素包装在一个 div 中，并试图让它以这种方式工作，但没有成功。

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

这是 [终于！] 在类似任务中为我工作的方法，同时还对齐文本下方的图像图标。

我将<td> 的内容包装在<div> 容器中，定位并使用transform: translateX(-50%)。

参见示例 sn-p（如下）或 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>

Answer 2

使用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