CSS Transform in Table Header Resizes Header Cell

Question

I'm trying to display rotated text in a table cell. When I use rotate(), the table cells do not maintain their original widths unless I specify position: absolute. With that, the divs containing the text are misaligned as shown in the fiddle.

How is it possible that the text is shown outside of the table cell? How do I get it inside the table cells with using fixed width/height cells? I wasn't able to keep the cells their fixed width without the position: absolute.

JSFiddle: https://jsfiddle.net/jasoncable/f82h95gp/

Code :

.assignment-table {
  height: 150px;
}

.assignment-table tr {
  height: 150px;
}

.assignment-table tr td {
  width: 50px;
  height: 150px;
  border: 1px solid black;
}

.assignment-table tr td div {
  transform: rotate(-90deg);
  font-size: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
}

<table class="assignment-table">
  <tr>
    <td>
      <div>Grade in Marking Period<br>points/points</div>
    </td>
    <td>
      <div>Assignment 1</div>
    </td>
  </tr>
</table>

Answer 1

You can adjust the transform-origin then apply a translation:

.assignment-table {
  height: 150px;
}

.assignment-table tr {
  height: 150px;
}

.assignment-table tr td {
  width: 50px;
  height: 150px;
  border: 1px solid black;
}

.assignment-table tr td div {
  transform: rotate(-90deg) translateX(-50%);
  font-size: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  transform-origin: left top;
}

<table class="assignment-table">
  <tr>
    <td>
      <div>Grade in Marking Period<br>points/points</div>
    </td>
    <td>
      <div>Assignment 1</div>
    </td>
  </tr>
</table>