Rotate Text without effecting td width

Question

ive got a Problem with formatting my table. Ill have a Table width maximum 5 Rows, one row of them has a rowspan for the complete Table. This Cell should be just get the minimum width .

But when i rotate the Text, the td gets much more wider then necessary. In this case the Word "sometextsometextsometext" takes more space that he should do - i need this left row as thin as possible.

I've tried so many things to give it a fix width but nothing worked for me

I'll appreciate your help

  <style>
   .rotated {
   text-align:center;

   
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:table-cell;
vertical-align:middle;
}

</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-striped table-sm" id="test1">

    <tbody>
    <tr class="table-info">
        <td style="width: 1.00%;" rowspan="800" class="align-middle table-info" scope="col"><p class=" ml-2  rotated"><strong>sometextsometextsometext</strong></p></td>
        <th style="width: 99.00%" scope="row" class="text-center" colspan="5">Chapter 1
   </tr>
   <tr>
   <th style="width: 40.00%"> Bezeichung </th>
   <th style="width: 15.00%"> 05.2021 </th>
   <th style="width: 15.00%">  </th>
   <th style="width: 15.00%"> </th>
   </tr><tr><th scope="row">1010 ST </th><td>90</td></tr><tr><th scope="row">1020 ST </th><td>444</td></tr><tr><th scope="row">1030 ST </th><td>406</td></tr><tr><th scope="row">1040 ST </th><td>136</td></tr><tr><th scope="row">1050 ST </th><td>254</td></tr><tr><th scope="row">1060 ST </th><td>139</td></tr><tr><th scope="row">1070 ST </th><td>122</td></tr><tr><th scope="row"> 1080 ST </th><td>71</td></tr>
  </tr><tr><th scope="row">1010 ST </th><td>90</td></tr><tr><th scope="row">1020 ST </th><td>444</td></tr><tr><th scope="row">1030 ST </th><td>406</td></tr><tr><th scope="row">1040 ST </th><td>136</td></tr><tr><th scope="row">1050 ST </th><td>254</td></tr><tr><th scope="row">1060 ST </th><td>139</td></tr><tr><th scope="row">1070 ST </th><td>122</td></tr><tr><th scope="row"> 1080 ST </th><td>71</td></tr>
    </tbody>

  </table>
</pre>

Rotate Text without effecting td width

0 Answers0