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

Posted 2023-03-05

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

【英文标题】：Vertical alignment of rotated text in a table cell

【发布时间】：2014-05-25 00:45:39

【问题描述】：

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

http://jsfiddle.net/pelagic/faLVN/有一个例子

html

<div id="galley">

<table >
<thead><tr>
  <th  rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th  rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th  rowspan="2" class="vertical-label"><div class="vheader">One</div></th>
  <th colspan="11">Regions</th>
  <th  rowspan="2" class="vertical-label"><div class="vheader">References</div></th>
</tr>
  <tr>
    <th   class="vertical-label"><div class="vheader">Antarctic</div></th>
    <th   class="vertical-label"><div class="vheader">Arctic</div></th>
    <th   class="vertical-label"><div class="vheader">Baltic Sea</div></th>
    <th   class="vertical-label"><div class="vheader">Black Sea</div></th>
    <th   class="vertical-label"><div class="vheader">Caspian Sea</div></th>
    <th   class="vertical-label"><div class="vheader">Indo Pacific</div></th>
    <th   class="vertical-label"><div class="vheader">Mediterranean Sea</div></th>
    <th   class="vertical-label"><div class="vheader">North Atlantic</div></th>
    <th   class="vertical-label"><div class="vheader">North Pacific</div></th>
    <th   class="vertical-label"><div class="vheader">South Atlantic</div></th>
    <th   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

【问题讨论】：

注意：height="130px" 是错误的。它要么是 HTML 中的 height="130"，要么最好将其移动到您的 CSS 中，它是 height: 130px

【参考方案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>

【讨论】：

我在transform 中添加了一个rotate(180deg) 以使文本以另一种方式阅读。

【参考方案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

【讨论】：

细胞有什么样的对齐方式？看看前三个单元格，我们很难说是middle 还是top？而下一个单元格似乎与bottom 对齐，但实际上并非如此。这只是一个可接受的解决方案（对于 OP）。虽然我认为如果我们不能让他们全部bottom ，最好让他们全部middle 像在OP 的小提琴中一样。

最好将它们放在中间，但在这里我尝试将 transform-origin 属性与 CSS 变换结合使用，以更改变换的原点。是否有其他替代方案？