Vertical alignment of rotated text in a table cell

Here's what [finally!] worked for me on a similar task, when also aligning an image icon below the text.

I wrapped the <td> contents in a <div> container, positioned and using transform: translateX(-50%).

See example snippet (below) or 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>

Tags:

Html

Css

Recent Posts