Vertical text in table takes too much width

Question

I am trying to add a vertical text in one of the column, but it takes too much width. Below, I will add a screen shot of what I am trying to achieve.

Here is my code:

<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2"></th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Weld/joint No</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Item/Position No.</th>
<th colspan="2">Material Spec Grade</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Size</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Thickness</th>
<th colspan="2">Heat/Plate/TestNo</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Welder No. for tracking</th>
<th colspan="2">Fitup Result</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2">Date</th>
<th style="text-align:center;vertical-align:middle;" rowspan="2" >Sign</th>
</tr>
<tr>

<th>Material 1</th>
<th>Material 2</th>

<th>Material 1</th>
<th>Material 2</th>

<th>Accept</th>
<th>Reject</th>
</tr>
</thead>
<tbody>
<c:forEach begin="1" var="xx" end="10">
<tr>
<c:if test="${xx==1}">
<td class="verticaltext" rowspan="10">
Fabrication Assembly Fit-Up
</td>
</c:if>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</c:forEach>
<tr>
<td colspan="4">Name & Signature of fabrication foreman</td>
<td colspan="3">Released to</td>

<td colspan="2">
<input type="checkbox">
QC/NDE/DIM.
</td>
<td colspan="1">
<input type="checkbox">
Welding
</td>

<td colspan="4">
<input type="checkbox">
Fabrication/Assembly
</td>
</tr>
</tbody>
</table>

My css code:

.verticaltext{  
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
}

I tried this answer but it is taking too much width. Can anyone help me to attain a table as shown in the screenshot. Thank you in advance.