如何设置旋转列标题的宽度而不固定表格大小？

Question

我有一张带旋转标题的表格，然后高度动态调整大小，因此它不会与上面的内容重叠。 请参阅此Fiddle以了解我的意思。

我想将第2列宽度设置为复选框的大小，即与第1列相同。但我不想修复表格宽度。

.verticalTableHeader {
  text-align: center;
  white-space: nowrap;
  g-origin: 50% 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.verticalTableHeader p {
  margin: 0 -100%;
  display: inline-block;
}
.verticalTableHeader p:before {
  content: '';
  width: 0;
  padding-top: 110%;
  /* takes width as reference, + 10% for faking some extra padding */
  display: inline-block;
  vertical-align: middle;
}
//table {
 text-align:center;
 table-layout:fixed;
 width:150px
}

<table border="1">
  <tr>
    <th class="verticalTableHeader">
      <p>First</p>
    </th>
    <th class="verticalTableHeader">
      <p>Secondlongheadear</p>
    </th>
    <th>
      <p>Third</p>
    </th>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>this is fine</td>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>responsive</td>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>not fixed width</td>
  </tr>
</table>