90-градусное поворот текста в таблице

Question

Я пытаюсь выровнять текст в верхней строке таблицы, чтобы он отображался вертикально с помощью функции преобразования вращения. Хотя я успешно поворачиваю слово в заголовке таблицы, я не могу укоротить ширину столбца таблицы равной ширине повернутого заголовка. (Он остается той же ширины названия, если он должен был быть выложен горизонтально). Кроме того, я использую проценты для указания ширины столбца.

.vertical-th { 
 
    transform: rotate(-90deg); 
 
}

<table> 
 
    <tr> 
 
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Manuality--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Probability--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Gravity--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Mitigation--> 
 
    </th> 
 

 
    <th colspan="3"></th> 
 
    <th class="vertical-th">Manuality</th> 
 
    <th class="vertical-th">Probability</th> 
 
    <th class="vertical-th">Gravity</th> 
 
    <th class="vertical-th">Mitigation</th> 
 

 
    </tr> 
 
</table>

Answer 1

Мы можем сделать некоторые CSS трюки от коробления заголовки текста внутри DIV's и применения некоторых правил о th и DIV's внутри него, то мы можем получить более стайлинг способность, то мы можем сократить ширину заголовка, даже если текст длинный.

Некоторые вещи, как:Я надеюсь, что это помогает вам, спасибо

th, td, table{ 
 
    border:solid 1px; 
 
} 
 

 
div.vertical{ 
 
    margin-left: -85px; 
 
    position: absolute; 
 
    width: 215px; 
 
    transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); /* Safari/Chrome */ 
 
    -moz-transform: rotate(-90deg); /* Firefox */ 
 
    -o-transform: rotate(-90deg);  /* Opera */ 
 
    -ms-transform: rotate(-90deg);  /* IE 9 */ 
 
} 
 

 
th.vertical{ 
 
    max-width: 50px; 
 
    height: 85px; 
 
    line-height: 14px; 
 
    padding-bottom: 20px; 
 
    text-align: inherit; 
 
}

<table> 
 
    <tr> 
 
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Manuality--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Probability--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Gravity--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Mitigation--> 
 
    </th> 
 

 
    <th class="vertical"><div class="vertical">Manuality</div></th> 
 
    <th class="vertical"><div class="vertical">Probability</div></th> 
 
    <th class="vertical"><div class="vertical">Gravity</div></th> 
 
    <th class="vertical"><div class="vertical">Mitigation</div></th> 
 
    </tr> 
 
</table>

Answer 2

Простой и легкий способ создать вращательный заголовок таблицы, используя ниже концепции.

$(function() { 
 
    var header_height = 0; 
 
    $('.rotate-table-grid th span').each(function() { 
 
     if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth(); 
 
    }); 
 

 
    $('.rotate-table-grid th').height(header_height); 
 
});

table.rotate-table-grid{box-sizing: border-box; 
 
border-collapse: collapse;} 
 
.rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th { 
 
    border: 1px solid #ddd; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 
.rotate-table-grid th span { 
 
    transform-origin: 0 50%; 
 
    transform: rotate(-90deg); 
 
    white-space: nowrap; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="rotate-table-grid"> 
 
    <thead> 
 
     <tr> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
     </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
</tbody> 
 
</table>