CSS rotated/slanting table header border alignment

Question

I need to make a slanting/rotated table headers, how do I make the slanting inner-side header border to align nicely with the vertical border of the table cell element?

HTML:

<table>
    <tr>
        <th class="rotate"><div><span>Column1</span></div></th>
        <th class="rotate"><div><span>Column2</span></div></th>
        <th class="rotate"><div><span>Column3</span></div></th>
        <th class="rotate"><div><span>Column4</span></div></th>
   </tr>
    <tr>
        <td>RowDisplay1000</td>
        <td>Row12</td>
        <td>Row13</td>
        <td>Row14</td>
   </tr>
    <tr>
        <td>RowDisplay2000</td>
        <td>Row22</td>
        <td>Row23</td>
        <td>Row24</td>
   </tr>

</table>

CSS:

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}


th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 7px 10px;
}

table {
    border-collapse: collapse;
    width:100%;
}
table td
/*, #rotated th*/ 
{
    border: 1px solid #ccc;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

http://jsfiddle.net/Verdeairo/gwnx03vg/

Answer 1

How about moving the headers a bit, like

th.rotate > div {
      transform: 
        /* Magic Numbers */
        translate(-18px, 51px)
        /* 45 is really 360 - 45 */
        rotate(315deg);
      width: 30px;
    }

Answer 2

Check this out: http://jsfiddle.net/gwnx03vg/2/

Here's what I did:

1. Removed the height of th

th.rotate {
    /* Something you can count on */
    white-space: nowrap;
}

2. Added the transform-origin property and changed the translate value

th.rotate > div {
  transform: 
    translate(-7px, -2px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    transform-origin: left bottom;
    width: 30px;
}