Damn it, man, I'm a doctor, not a torpedo technician!

Damn-it,-man,-Im-a-doctor,-not-a-torpedo-technician!.markdown

Damn it, man, I'm a doctor, not a torpedo technician!

A Pen by Jesper Birkestrøm on CodePen.

License.

index.html

<table style="border: 1px solid red;">
  <tr>
    <td>
      <div class="applicationName">
        <h2>Tekst</h2>
      </div>
    </td>
    <td>
      2nd cell
    </td>
  </tr>
</table>

script.js

NodeList.prototype.forEach || (NodeList.prototype.forEach = Array.prototype.forEach);

document.querySelectorAll('div.applicationName').forEach(function (outer) {
  var inner = document.querySelector('h2', outer);
  var box = inner.getBoundingClientRect();
  outer.style.width = box.width + 'px';
  outer.style.height = box.height + 'px';
  inner.style.transform = 'translate(0,' + (box.height) + 'px) ' + window.getComputedStyle(inner).transform;
});

style.less

table {
  height: 300px;
}

div {
  display: inline-block;
  //background-color: blue;
  h2 {
    margin: 0;
    padding: 0;
    display: inline-block;
    //background-color: yellow;
    transform: rotate(-90deg);
    transform-origin: 0 0;
  }
}