logo标签列表

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

htmlcsstextrotationvertical-alignment
6

我已经将表头中的文本旋转，并尝试将其与单元格底部对齐。垂直对齐不会改变任何内容，因此我将每个元素都包装在一个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
}
警告：height="130px"是不正确的。在HTML中必须使用height="130"，或者更好的做法是将其移动到CSS中，使用height: 130px。 - RoToRa
2个回答
2

以下是我在类似任务中的解决方案，同时将图像图标与文本对齐。

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

请参见下面的示例代码片段或此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) 以使文本朝另一个方向阅读。 - nshew13
1

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

演示

单元格有什么样的对齐方式？看一下前三个单元格，我们几乎无法确定它是“中间”还是“顶部”？而接下来的单元格似乎具有“底部”的对齐方式，但实际上并非如此。这只是一个可以接受的解决方案（对于OP而言）。虽然我认为如果我们不能让它们全部都是“底部”，那就最好像OP的fiddle一样让它们全部都是“中间”。 - King King
最好将它们放在中间，但我正在尝试使用transform-origin属性与CSS变换结合使用，以改变变换的起点。是否有其他替代方法？ - 4dgaurav
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接