Блог

Главная - Вопросы по программированию - BS5 — Поворот текста без изменения ширины td

BS5 — Поворот текста без изменения ширины td

#html #css #twitter-bootstrap #html-table #rotation

Вопрос:

у меня проблема с форматированием моей таблицы. У меня ширина таблицы не более 5 строк, одна строка из них имеет ширину строки для всей таблицы. Эта ячейка должна быть просто минимальной ширины .

Но когда я поворачиваю текст, td становится намного шире, чем необходимо. В этом случае слово «статистика» занимает больше места, чем он должен делать — мне нужен этот левый ряд как можно более тонким.

Я перепробовал так много вещей, чтобы исправить это, но у меня ничего не получалось

Я буду признателен вам за помощь

  .rotated {
   float:left;
   text-align:center;
   margin-top:10px;
   
-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;
} 
 <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>Statistic</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 Wien </th><td>90</td></tr><tr><th scope="row">1020 Wien </th><td>444</td></tr><tr><th scope="row">1030 Wien </th><td>406</td></tr><tr><th scope="row">1040 Wien </th><td>136</td></tr><tr><th scope="row">1050 Wien </th><td>254</td></tr><tr><th scope="row">1060 Wien </th><td>139</td></tr><tr><th scope="row">1070 Wien </th><td>122</td></tr><tr><th scope="row"> 1080 Wien </th><td>71</td></tr></tbody>
</table>
Метки: