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

2019年8月4日 234次阅读

我已经旋转了表头中的文本,我试图将它与单元格的底部对齐.垂直对齐不会改变任何东西,所以我将每个元素包装在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
}

最佳答案 使用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

点赞