表格中的垂直文字占用太多宽度

问题描述

我正在尝试在其中一列中添加垂直文本，但是它占用了太多的宽度。在下面，我将添加一个屏幕截图，其中列出了我要实现的目标。

这是我的代码：

<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>

我的CSS代码：

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

我尝试了这个answer，但是它占用了太多的宽度。任何人都可以帮助我获得一张表格，如屏幕截图所示。预先谢谢你。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html row